Overview

consts
Ez
PFactory
Func
Prop
EFactory
cfg.param
dim Actual
p&s
Easer
ECalc
EBezier
Easy
Easies
AFrame
ACues
presets
hsl_hwb
color
eases
devices
Sheet1
Sheet1 (2)


Sheet 1: consts































bitmasks




E





C
HD
Ez

Is





color
feColorMatrix
UHD color*
matrix3d
matrix
viewBox++
convert to degrees

U Ez . Ez.Ez.rad
C.rr

C.r 1
C.RR 1
HD.l 1
Ez.a1 1
Ez.a 1
Ez.x 1
Ez.rad 0.0174532925

F Ez . Ez.Ez.grad
C.gr

C.g 2
C.GR 2
HD.a 2
Ez.b1 2
Ez.b 2
Ez.y 2
Ez.grad 1.1111111111

FN Ez . Ez.Ez.turn
C.br

C.b 4
C.BR 4
HD.b 4
Ez.c1 4
Ez.c 4
Ez.z 4
Ez.turn 0.0027777778

P Ez . Ez.
C.ar

C.a 8
C.AR 8
HD.c 2
Ez.d1 8
Ez.d 8
Ez.width 4




PR Ez . Err:520
C.cr

C.h 1
C.CR 16
HD.h 4
Ez.a2 16
Ez.e 16
Ez.height 8
Ez has bitmasks


HD Ez . Err:520
C.rg

C.s 2
C.RG 32
HD.x 1
Ez.b2 32
Ez.f 32
Ez.w 4
E has enumerations


Ease Ez . Ez.
C.gg

C.l 4
C.GG 64
HD.y 2
Ez.c2 64
Ez.tx 16
Ez.h 8





Ez . Ez.
C.bg

C.w 2
C.BG 128
HD.z 4
Ez.d2 128
Ez.ty 32








Ez . Ez.
C.ag




C.AG 256
HD.alpha 8
Ez.a3 256











Ez . Ez.
C.cg




C.CG 512



Ez.b3 512



SVG rotate





Ez . Ez.
C.rb

rgb()

C.RB 1024
lab()
Ez.c3 1024



angle 8





Ez . Ez.
C.gb

hsl()

C.GB 2048
oklab()
Ez.d3 2048











Ez . Ez.
C.bb

hwb()

C.BB 4096
lch()
Ez.a4 4096











Ez . Ez.
C.ab




C.AB 8192
oklch()
Ez.b4 8192











Ez . Ez.
C.cb




C.CB 16384
color()
Ez.c4 16384











Ez . Ez.
C.ra




C.RA 32768



Ez.d4 32768











Ez . Ez.
C.ga




C.GA 65536

















Ez . Ez.
C.ba




C.BA 131072
* display-p3 and rec2020 use RGB nomenclature















Ez . Ez.
C.aa




C.AA 262144

















Ez . Ez.
C.ca




C.CA 524288

















Ez . Ez.































Sheet 2: Ez


const Ez

Public properties

rad float Math.PI / 180

grad float 10 / 9

turn float 1 / 360

defZero array arguments for Ez.toNumber() in array form

grThan0 array


notNeg array


notZero array


okEmptyUndef array for Ez.toArray()

undefGrThan0 array created for toNumber() in Pfactory.init()

undefNotZero array


defGrThan0 array


defNotNeg array


intGrThan0 array


intNotNeg array


x integer bitmasks for masking SVG viewBox attribute arguments

y integer they work for other properties too…

z integer


w integer


h integer


width integer


height integer


angle integer bitmask for SVG rotate()

Public methods

is() assigns a read-only property to an object in the format: isXXX

readOnly() assigns a read-only property to an object

shallowClone() returns a shallow clone of an object

newArray2D() returns a new 2D array, optionally filled

swapDims() swaps a 2D array's inner and outer dimensions

clamp() clamps a value between a min and a max

comp() complements a unit interval value = 1 - unit

compIf() conditional version of comp()

unitOutOfBounds() checks for out-of-bounds units in an array

promise() instead of Promise.withResolvers()

initialCap() returns a new string with the first character in upper case

toCamel() returns a camelCase string based on the arg supplied

camelToKebab() converts a camelCase string to kebab-case

kebabToCamel() converts a kebab-case string to camelCase

kebabToSnake() converts a kebab-case string to snake_case

toSum() preset callback for Array.prototype.reduce() to sum numbers

toNumby() soft numeric conversion, helps PBase and subclasses

toNumber() numeric conversion with lots of options

toArray() converts to an array from any number of types, many options

toElement() validates elements and converts string to element by id

toElements() converts to an array of elements

defaultToTrue() converts undefined to true and everything else to boolean

noneToZero() converts null to zero for Color.js coordinate arrays

"Protected" methods

_mustBe() error & error message generating functions

_mustBeErr()


_cantBe()


_cantBeErr()


_cant()


_cantErr()


_only()


_onlyErr()


_mustAscendErr()


_invalidErr()


_isElmy() validation functions

_validObj()


_validFunc()


_join() helps Func/Prop.prototype.join()

_appendUnits() validates as it applies string units to numbers

_dims() counts array dimensions up to 2, non-array = 0, undefined = -1









Sheet 3: PFactory


class PFactory

name type description

Public static methods

addAttributes()



init()



defer()



toNumber()



toArray()



validObj()



validFunc()



bitmask()



swapDims()
swaps 2D array dimensions, inner/outer

"Protected" static methods

_isElmy()



_toElement()



_toElements()



_stringToElm()



_mustBeDef()
'must be defined' error message maker

Private

static properties

#lengths



#angles



#waits



#funcs



#funcC



#funcG



#funcSR



#funcN



#funcL



#funcA



#func2



#funcT



#funcTL



#funcTA



#funcT2



#color



#svg



#svgN



#svg2



#css



#cssN



#cssL



#cssTm



#cssBg



#css2



#cssL2



#html



#htmlR



#elmR



#elmF



#initialized bool set to true by init()

static methods

#htmlLoop()



#bitmask()



#names()



#add()



#toElement()











Sheet 4: Func

Current value vs CFunc - function/space:



65,504 2000 60

Functions default range
Firefox Chrome
Firefox kebab-case & camelCase 8/31/2023 Property
no color function or space conversion CSS functions by space color() spaces color-mix() 0.392 25,700 120,000 1,000

<length>
0

accentColor accentColor
accent-color accentColor <>*-*
you can avoid E.cV and animate all 3 args rgb() srgb srgb 0.145 9,480




blur()



additiveSymbols
align-content alignContent
else: link to colorjs converter hsl() srgb-linear srgb-linear 0.318 20,800




drop-shadow()


alignContent alignContent
align-items alignItems 86%
Gradients: hwb() xyz xyz






perspective()


alignItems alignItems
align-self alignSelf 361
won't animate hex or named colors lab() xyz-d50 xyz-d50
color(--acescg 0.392342452369321 0.144723986321446 0.392342452369321)



% circle()



alignmentBaseline

animation 60
Single colors: lch() xyz-d65 xyz-d65
color(--acescg 25700 9480 20800)



% ellipse()


alignSelf alignSelf
animation-composition animationComposition 421
named colors in RGB, HSL, HWB oklab() display-p3 lab
[ 255 [

% translate() 0

animation animation
animation-delay animationDelay
hex colors in RGB only oklch() a98-rgb oklab
83.6365386559 213 0.4799233824 0.3923424524
% translateX() 0

animationComposition animationComposition
animation-direction animationDirection
To set a named color as a destination:
prophoto-rgb lch
42.767553162 109 0.1925344493 0.1447239863
% translateY() 0

animationDelay animationDelay
animation-duration animationDuration
use the C object
rec2020 oklch
68.1414914409 174 0.3986378509 0.3175378603

translateZ() 0

animationDirection animationDirection
animation-fill-mode animationFillMode



hsl
color(srgb 83.637 42.768 68.141)
]

mix translate3d() 0

animationDuration animationDuration
animation-iteration-count animationIterationCount



hwb










animationFillMode animationFillMode
animation-name animationName










<angle>



animationIterationCount animationIterationCount
animation-play-state animationPlayState
Color.js animations Color.js color spaces Color.js id Color.js token CSS Color.js only <select>



hue-rotate() 0

animationName animationName
animation-timing-function animationTimingFunction
all args always set, o.isSet = all args masked Adobe® 98 RGB compatible a98rgb a98rgb a98-rgb a98-rgb
a98-rgb TRUE Adobe® 98 RGB compatible a98rgb

rotate() 0

animationPlayState animationPlayState

appearance
o.colorjs or o.cjs property = Color instance Linear Adobe® 98 RGB compatible a98rgb-linear --a98-rgb-linear
a98rgb-linear a98rgb-linear TRUE Linear Adobe® 98 RGB compatible

rotateX() 0


animationRange
aspect-ratio aspectRatio
one Easer instance per color space, across elms ACEScc acescc --acescc
acescc acescc TRUE ACEScc

rotateY() 0


animationRangeEnd
backdrop-filter backdropFilter
multiple spaces = multiple Easy targets ACEScg acescg --acescg
acescg acescg TRUE ACEScg

rotateZ() 0


animationRangeStart
backface-visibility backfaceVisibility
1 Color with >1 elms: CAM16-JMh cam16-jmh --cam16-jmh
cam16-jmh cam16-jmh TRUE CAM16-JMh

rotate3d() 0


animationTimeline

background
either prop.get()/parse() or {cv:[[]]}/units HCT hct --hct
hct hct TRUE HCT * arg[0] can be <number>
hsl(), hwb()* 0

animationTimingFunction animationTimingFunction
background-attachment backgroundAttachment
alpha can vary as a plug across elements HPLuv hpluv --hpluv
hpluv hpluv TRUE HPLuv † arg[2] can be <number>
lch(), oklch()† 0

appearance appearance
background-blend-mode backgroundBlendMode
plug set differently than plugCV HSL hsl hsl() hsl()
hsl() TRUE HSL

skew() 0

aspectRatio appRegion
background-clip backgroundClip
all numbers, no strings, no units HSLuv hsluv --hsluv
hsluv hsluv TRUE HSLuv

skewX() 0


ascentOverride
background-color backgroundColor
afcru() sets o.c = CFunc.A + 1, o.r = CFunc.A; HSV hsv --hsv
hsv hsv TRUE HSV

skewY() 0


aspectRatio
background-image backgroundImage
optional() must use mask[CFunc.A] to set o.c HWB hwb hwb() hwb()
hwb() TRUE HWB





backdropFilter backdropFilter
background-origin backgroundOrigin
maskCV() doesn't need to convert to numbers ICTCP ictcp ictcp
ictcp ictcp TRUE ICTCP
<number>



backfaceVisibility backfaceVisibility
background-position backgroundPosition
plugCV() no separator, just args as Number Jzazbz jzazbz jzazbz
jzazbz jzazbz TRUE Jzazbz
% brightness() 1

background background
background-position-x backgroundPositionX

JzCzHz jzczhz jzczhz
jzczhz jzczhz TRUE JzCzHz
% contrast() 1

backgroundAttachment backgroundAttachment
background-position-y backgroundPositionY
Gradients & color-mix() with Color.js Lab lab lab() lab()
lab() TRUE Lab
% grayscale() 1

backgroundBlendMode backgroundBlendMode
background-repeat backgroundRepeat
a mask array for each Color instance Lab D65 lab-d65 lab-d65
lab-d65 oklab() TRUE Lab D65
% invert() 0

backgroundClip backgroundClip
background-size backgroundSize

Oklab oklab oklab() oklab()
lab-d65 TRUE Oklab
% opacity() 1

backgroundColor backgroundColor
baseline-source baselineSource
o.currentValue LCH lch lch() lch()
lch() TRUE LCH
% saturate() 1

backgroundImage backgroundImage
block-size blockSize
Must be array by elm (unless 1 elm & (string | 1 arg)) Oklch oklch oklch() oklch()
oklch() TRUE Oklch
% sepia() 0

backgroundOrigin backgroundOrigin

border
1D: LChuv lchuv --lchuv
lchuv lchuv TRUE LChuv

scale() 1

backgroundPosition backgroundPosition
border-block borderBlock
String - full property value (or minimally parsable) Luv luv --luv
luv luv TRUE Luv

scale3d() 1

backgroundPositionX backgroundPositionX
border-block-color borderBlockColor
Number - full property value w/o units, 1 arg only P3 p3 display-p3 display-p3
display-p3 TRUE P3 Okhsl % color funcs


backgroundPositionY backgroundPositionY
border-block-end borderBlockEnd
Color - [...o.cjs[o.space], o.cjs.alpha] Linear P3 p3-linear --display-p3-linear
p3-linear p3-linear TRUE Linear P3 Okhsv
matrix() (1,0,0,1,0,0)

backgroundRepeat backgroundRepeat
border-block-end-color borderBlockEndColor
2D: ProPhoto prophoto prophoto-rgb prophoto-rgb
prophoto-rgb TRUE ProPhoto

matrix3d()



backgroundRepeatX
border-block-end-style borderBlockEndStyle
String = arg with units Linear ProPhoto prophoto-linear --prophoto-rgb-linear
prophoto-linear prophoto-linear TRUE Linear ProPhoto






backgroundRepeatY
border-block-end-width borderBlockEndWidth
Number = arg w/o units REC.2020 rec2020 --rec2020 rec2020
rec2020 TRUE REC.2020





backgroundSize backgroundSize
border-block-start borderBlockStart
interior (byArg) dimension: Linear REC.2020 rec2020-linear --rec2020-linear
rec2020-linear rec2020-linear TRUE Linear REC.2020






baselineShift
border-block-start-color borderBlockStartColor
no validation of arr.length REC.2100-HLG rec2100hlg rec2100hlg
rec2100hlg rec2100hlg TRUE REC.2100-HLG





baselineSource baselineSource
border-block-start-style borderBlockStartStyle
can be sparse if for plug only REC.2100-PQ rec2100pq rec2100pq
rec2100pq rec2100pq TRUE REC.2100-PQ






basePalette
border-block-start-width borderBlockStartWidth

sRGB srgb rgb() rgb()
rgb() TRUE sRGB





blockSize blockSize
border-block-style borderBlockStyle

Linear sRGB srgb-linear srgb-linear srgb-linear
srgb-linear TRUE Linear sRGB





border border
border-block-width borderBlockWidth

XYZ (D65) xyz, xyz-d65 xyz, xyz-d65 xyz, xyz-d65
xyz-d50 FALSE XYZ D65





borderBlock borderBlock
border-bottom borderBottom

XYZ D50 xyz-d50 xyz-d50 xyz-d50
xyz-d65 TRUE XYZ D50





borderBlockColor borderBlockColor
border-bottom-color borderBottomColor

Absolute XYZ D65 xyz-abs-d65 --xyz-abs-d65
xyz-abs-d65 xyz-abs-d65 TRUE Absolute XYZ D65





borderBlockEnd borderBlockEnd
border-bottom-left-radius borderBottomLeftRadius








XYZ D65





borderBlockEndColor borderBlockEndColor
border-bottom-right-radius borderBottomRightRadius















borderBlockEndStyle borderBlockEndStyle
border-bottom-style borderBottomStyle















borderBlockEndWidth borderBlockEndWidth
border-bottom-width borderBottomWidth















borderBlockStart borderBlockStart
border-collapse borderCollapse















borderBlockStartColor borderBlockStartColor
border-color borderColor















borderBlockStartStyle borderBlockStartStyle
border-end-end-radius borderEndEndRadius















borderBlockStartWidth borderBlockStartWidth
border-end-start-radius borderEndStartRadius















borderBlockStyle borderBlockStyle
border-image borderImage















borderBlockWidth borderBlockWidth
border-image-outset borderImageOutset















borderBottom borderBottom
border-image-repeat borderImageRepeat















borderBottomColor borderBottomColor
border-image-slice borderImageSlice















borderBottomLeftRadius borderBottomLeftRadius
border-image-source borderImageSource















borderBottomRightRadius borderBottomRightRadius
border-image-width borderImageWidth















borderBottomStyle borderBottomStyle
border-inline borderInline















borderBottomWidth borderBottomWidth
border-inline-color borderInlineColor















borderCollapse borderCollapse
border-inline-end borderInlineEnd















borderColor borderColor
border-inline-end-color borderInlineEndColor















borderEndEndRadius borderEndEndRadius
border-inline-end-style borderInlineEndStyle















borderEndStartRadius borderEndStartRadius
border-inline-end-width borderInlineEndWidth















borderImage borderImage
border-inline-start borderInlineStart















borderImageOutset borderImageOutset
border-inline-start-color borderInlineStartColor















borderImageRepeat borderImageRepeat
border-inline-start-style borderInlineStartStyle















borderImageSlice borderImageSlice
border-inline-start-width borderInlineStartWidth















borderImageSource borderImageSource
border-inline-style borderInlineStyle















borderImageWidth borderImageWidth
border-inline-width borderInlineWidth















borderInline borderInline
border-left borderLeft















borderInlineColor borderInlineColor
border-left-color borderLeftColor















borderInlineEnd borderInlineEnd
border-left-style borderLeftStyle















borderInlineEndColor borderInlineEndColor
border-left-width borderLeftWidth















borderInlineEndStyle borderInlineEndStyle
border-radius borderRadius















borderInlineEndWidth borderInlineEndWidth
border-right borderRight















borderInlineStart borderInlineStart
border-right-color borderRightColor















borderInlineStartColor borderInlineStartColor
border-right-style borderRightStyle















borderInlineStartStyle borderInlineStartStyle
border-right-width borderRightWidth















borderInlineStartWidth borderInlineStartWidth
border-spacing borderSpacing















borderInlineStyle borderInlineStyle
border-start-end-radius borderStartEndRadius















borderInlineWidth borderInlineWidth
border-start-start-radius borderStartStartRadius















borderLeft borderLeft
border-style borderStyle















borderLeftColor borderLeftColor
border-top borderTop















borderLeftStyle borderLeftStyle
border-top-color borderTopColor















borderLeftWidth borderLeftWidth
border-top-left-radius borderTopLeftRadius















borderRadius borderRadius
border-top-right-radius borderTopRightRadius















borderRight borderRight
border-top-style borderTopStyle















borderRightColor borderRightColor
border-top-width borderTopWidth















borderRightStyle borderRightStyle
border-width borderWidth















borderRightWidth borderRightWidth

bottom















borderSpacing borderSpacing
box-decoration-break boxDecorationBreak















borderStartEndRadius borderStartEndRadius
box-shadow boxShadow















borderStartStartRadius borderStartStartRadius
box-sizing boxSizing















borderStyle borderStyle
break-after breakAfter















borderTop borderTop
break-before breakBefore















borderTopColor borderTopColor
break-inside breakInside















borderTopLeftRadius borderTopLeftRadius
caption-side captionSide















borderTopRightRadius borderTopRightRadius
caret-color caretColor















borderTopStyle borderTopStyle

clear















borderTopWidth borderTopWidth

clip















borderWidth borderWidth
clip-path clipPath















bottom bottom
clip-rule clipRule















boxDecorationBreak


color















boxShadow boxShadow
color-adjust colorAdjust















boxSizing boxSizing
color-interpolation colorInterpolation















breakAfter breakAfter
color-interpolation-filters colorInterpolationFilters















breakBefore breakBefore
color-scheme colorScheme















breakInside breakInside
column-count columnCount
















bufferedRendering
column-fill columnFill















captionSide captionSide
column-gap columnGap















caretColor caretColor
column-rule columnRule















clear clear
column-rule-color columnRuleColor















clip clip
column-rule-style columnRuleStyle















clipPath clipPath
column-rule-width columnRuleWidth















clipRule clipRule

columns















color color
column-span columnSpan















colorAdjust

column-width columnWidth















colorInterpolation colorInterpolation

contain















colorInterpolationFilters colorInterpolationFilters

container
















colorRendering
container-name containerName















colorScheme colorScheme
container-type containerType















columnCount columnCount
contain-intrinsic-block-size containIntrinsicBlockSize















columnFill columnFill
contain-intrinsic-height containIntrinsicHeight















columnGap columnGap
contain-intrinsic-inline-size containIntrinsicInlineSize















columnRule columnRule
contain-intrinsic-size containIntrinsicSize















columnRuleColor columnRuleColor
contain-intrinsic-width containIntrinsicWidth















columnRuleStyle columnRuleStyle

content















columnRuleWidth columnRuleWidth
counter-increment counterIncrement















columns columns
counter-reset counterReset















columnSpan columnSpan
counter-set counterSet















columnWidth columnWidth
dominant-baseline cssFloat















contain contain

cursor















container container

cx















containerName containerName

cy















containerType containerType

d















containIntrinsicBlockSize containIntrinsicBlockSize

direction















containIntrinsicHeight containIntrinsicHeight

display















containIntrinsicInlineSize containIntrinsicInlineSize

dominantBaseline















containIntrinsicSize containIntrinsicSize
empty-cells emptyCells















containIntrinsicWidth containIntrinsicWidth

fill















content content
fill-opacity fillOpacity
















contentVisibility
fill-rule fillRule















counterIncrement counterIncrement

filter















counterReset counterReset

flex















counterSet counterSet
flex-basis flexBasis















cssFloat cssFloat
flex-direction flexDirection
















cssText
flex-flow flexFlow















cursor cursor
flex-grow flexGrow















cx cx
flex-shrink flexShrink















cy cy
flex-wrap flexWrap















d d

float
















descentOverride
flood-color floodColor















direction direction
flood-opacity floodOpacity















display display

font















dominantBaseline dominantBaseline
font-family fontFamily















emptyCells emptyCells
font-feature-settings fontFeatureSettings
















fallback
font-kerning fontKerning















fill fill
font-language-override fontLanguageOverride















fillOpacity fillOpacity
font-optical-sizing fontOpticalSizing















fillRule fillRule
font-palette fontPalette















filter filter
font-size fontSize















flex flex
font-size-adjust fontSizeAdjust















flexBasis flexBasis
font-stretch fontStretch















flexDirection flexDirection
font-style fontStyle















flexFlow flexFlow
font-synthesis fontSynthesis















flexGrow flexGrow
font-synthesis-small-caps fontSynthesisSmallCaps















flexShrink flexShrink
font-synthesis-style fontSynthesisStyle















flexWrap flexWrap
font-synthesis-weight fontSynthesisWeight















float float
font-variant fontVariant















floodColor floodColor
font-variant-alternates fontVariantAlternates















floodOpacity floodOpacity
font-variant-caps fontVariantCaps















font font
font-variant-east-asian fontVariantEastAsian
















fontDisplay
font-variant-ligatures fontVariantLigatures















fontFamily fontFamily
font-variant-numeric fontVariantNumeric















fontFeatureSettings fontFeatureSettings
font-variant-position fontVariantPosition















fontKerning fontKerning
font-variation-settings fontVariationSettings















fontLanguageOverride

font-weight fontWeight















fontOpticalSizing fontOpticalSizing
forced-color-adjust forcedColorAdjust















fontPalette fontPalette

gap















fontSize fontSize

grid















fontSizeAdjust

grid-area gridArea















fontStretch fontStretch
grid-auto-columns gridAutoColumns















fontStyle fontStyle
grid-auto-flow gridAutoFlow















fontSynthesis fontSynthesis
grid-auto-rows gridAutoRows















fontSynthesisSmallCaps fontSynthesisSmallCaps
grid-column gridColumn















fontSynthesisStyle fontSynthesisStyle
grid-column-end gridColumnEnd















fontSynthesisWeight fontSynthesisWeight
grid-column-gap gridColumnGap















fontVariant fontVariant
grid-column-start gridColumnStart















fontVariantAlternates fontVariantAlternates
grid-gap gridGap















fontVariantCaps fontVariantCaps
grid-row gridRow















fontVariantEastAsian fontVariantEastAsian
grid-row-end gridRowEnd















fontVariantLigatures fontVariantLigatures
grid-row-gap gridRowGap















fontVariantNumeric fontVariantNumeric
grid-row-start gridRowStart















fontVariantPosition

grid-template gridTemplate















fontVariationSettings fontVariationSettings
grid-template-areas gridTemplateAreas















fontWeight fontWeight
grid-template-columns gridTemplateColumns















forcedColorAdjust forcedColorAdjust
grid-template-rows gridTemplateRows















gap gap

height















grid grid
hyphenate-character hyphenateCharacter















gridArea gridArea

hyphens















gridAutoColumns gridAutoColumns
image-orientation imageOrientation















gridAutoFlow gridAutoFlow
image-rendering imageRendering















gridAutoRows gridAutoRows
ime-mode imeMode















gridColumn gridColumn
inline-size inlineSize















gridColumnEnd gridColumnEnd

inset















gridColumnGap gridColumnGap
inset-block insetBlock















gridColumnStart gridColumnStart
inset-block-end insetBlockEnd















gridGap gridGap
inset-block-start insetBlockStart















gridRow gridRow
inset-inline insetInline















gridRowEnd gridRowEnd
inset-inline-end insetInlineEnd















gridRowGap gridRowGap
inset-inline-start insetInlineStart















gridRowStart gridRowStart

isolation















gridTemplate gridTemplate
justify-content justifyContent















gridTemplateAreas gridTemplateAreas
justify-items justifyItems















gridTemplateColumns gridTemplateColumns
justify-self justifySelf















gridTemplateRows gridTemplateRows

left















height height
letter-spacing letterSpacing















hyphenateCharacter hyphenateCharacter
lighting-color lightingColor
















hyphenateLimitChars
line-break lineBreak















hyphens hyphens
line-height lineHeight















imageOrientation imageOrientation
list-style listStyle















imageRendering imageRendering
list-style-image listStyleImage















imeMode

list-style-position listStylePosition
















inherits
list-style-type listStyleType
















initialLetter

margin
















initialValue
margin-block marginBlock















inlineSize inlineSize
margin-block-end marginBlockEnd















inset inset
margin-block-start marginBlockStart















insetBlock insetBlock
margin-bottom marginBottom















insetBlockEnd insetBlockEnd
margin-inline marginInline















insetBlockStart insetBlockStart
margin-inline-end marginInlineEnd















insetInline insetInline
margin-inline-start marginInlineStart















insetInlineEnd insetInlineEnd
margin-left marginLeft















insetInlineStart insetInlineStart
margin-right marginRight















isolation isolation
margin-top marginTop















justifyContent justifyContent

marker















justifyItems justifyItems
marker-end markerEnd















justifySelf justifySelf
marker-mid markerMid















left left
marker-start markerStart
















length

mask















letterSpacing letterSpacing
mask-clip maskClip















lightingColor lightingColor
mask-composite maskComposite















lineBreak lineBreak
mask-image maskImage
















lineGapOverride
mask-mode maskMode















lineHeight lineHeight
mask-origin maskOrigin















listStyle listStyle
mask-position maskPosition















listStyleImage listStyleImage
mask-position-x maskPositionX















listStylePosition listStylePosition
mask-position-y maskPositionY















listStyleType listStyleType
mask-repeat maskRepeat















margin margin
mask-size maskSize















marginBlock marginBlock
mask-type maskType















marginBlockEnd marginBlockEnd
math-depth mathDepth















marginBlockStart marginBlockStart
math-style mathStyle















marginBottom marginBottom
max-block-size maxBlockSize















marginInline marginInline
max-height maxHeight















marginInlineEnd marginInlineEnd
max-inline-size maxInlineSize















marginInlineStart marginInlineStart
max-width maxWidth















marginLeft marginLeft
min-block-size minBlockSize















marginRight marginRight
min-height minHeight















marginTop marginTop
min-inline-size minInlineSize















marker marker
min-width minWidth















markerEnd markerEnd
mix-blend-mode mixBlendMode















markerMid markerMid
object-fit objectFit















markerStart markerStart
object-position objectPosition















mask mask

offset















maskClip

offset-anchor offsetAnchor















maskComposite

offset-distance offsetDistance















maskImage

offset-path offsetPath















maskMode

offset-rotate offsetRotate















maskOrigin


opacity















maskPosition


order















maskPositionX


outline















maskPositionY

outline-color outlineColor















maskRepeat

outline-offset outlineOffset















maskSize

outline-style outlineStyle















maskType maskType
outline-width outlineWidth















mathDepth mathDepth

overflow
















mathShift
overflow-anchor overflowAnchor















mathStyle mathStyle
overflow-block overflowBlock















maxBlockSize maxBlockSize
overflow-clip-margin overflowClipMargin















maxHeight maxHeight
overflow-inline overflowInline















maxInlineSize maxInlineSize
overflow-wrap overflowWrap















maxWidth maxWidth
overflow-x overflowX















minBlockSize minBlockSize
overflow-y overflowY















minHeight minHeight
overscroll-behavior overscrollBehavior















minInlineSize minInlineSize
overscroll-behavior-block overscrollBehaviorBlock















minWidth minWidth
overscroll-behavior-inline overscrollBehaviorInline















mixBlendMode mixBlendMode
overscroll-behavior-x overscrollBehaviorX















objectFit objectFit
overscroll-behavior-y overscrollBehaviorY















objectPosition objectPosition

padding
















objectViewBox
padding-block paddingBlock















offset offset
padding-block-end paddingBlockEnd















offsetAnchor offsetAnchor
padding-block-start paddingBlockStart















offsetDistance offsetDistance
padding-bottom paddingBottom















offsetPath offsetPath
padding-inline paddingInline
















offsetPosition
padding-inline-end paddingInlineEnd















offsetRotate offsetRotate
padding-inline-start paddingInlineStart















opacity opacity
padding-left paddingLeft















order order
padding-right paddingRight















outline outline
padding-top paddingTop















outlineColor outlineColor

page















outlineOffset outlineOffset
page-break-after pageBreakAfter















outlineStyle outlineStyle
page-break-before pageBreakBefore















outlineWidth outlineWidth
page-break-inside pageBreakInside















overflow overflow
paint-order paintOrder















overflowAnchor overflowAnchor

perspective















overflowBlock

perspective-origin perspectiveOrigin















overflowClipMargin overflowClipMargin
place-content placeContent















overflowInline

place-items placeItems















overflowWrap overflowWrap
place-self placeSelf















overflowX overflowX
pointer-events pointerEvents















overflowY overflowY
print-color-adjust position
















overrideColors

printColorAdjust















overscrollBehavior overscrollBehavior

quotes















overscrollBehaviorBlock overscrollBehaviorBlock

r















overscrollBehaviorInline overscrollBehaviorInline

resize















overscrollBehaviorX overscrollBehaviorX

right















overscrollBehaviorY overscrollBehaviorY

rotate















padding padding
row-gap rowGap















paddingBlock paddingBlock

rx















paddingBlockEnd paddingBlockEnd

ry















paddingBlockStart paddingBlockStart

scale















paddingBottom paddingBottom
scrollbar-color scrollbarColor















paddingInline paddingInline
scrollbar-gutter scrollbarGutter















paddingInlineEnd paddingInlineEnd
scrollbar-width scrollbarWidth















paddingInlineStart paddingInlineStart
scroll-behavior scrollBehavior















paddingLeft paddingLeft
scroll-margin scrollMargin















paddingRight paddingRight
scroll-margin-block scrollMarginBlock















paddingTop paddingTop
scroll-margin-block-end scrollMarginBlockEnd















page page
scroll-margin-block-start scrollMarginBlockStart















pageBreakAfter pageBreakAfter
scroll-margin-bottom scrollMarginBottom















pageBreakBefore pageBreakBefore
scroll-margin-inline scrollMarginInline















pageBreakInside pageBreakInside
scroll-margin-inline-end scrollMarginInlineEnd
















pageOrientation
scroll-margin-inline-start scrollMarginInlineStart















paintOrder paintOrder
scroll-margin-left scrollMarginLeft















perspective perspective
scroll-margin-right scrollMarginRight















perspectiveOrigin perspectiveOrigin
scroll-margin-top scrollMarginTop















placeContent placeContent
scroll-padding scrollPadding















placeItems placeItems
scroll-padding-block scrollPaddingBlock















placeSelf placeSelf
scroll-padding-block-end scrollPaddingBlockEnd















pointerEvents pointerEvents
scroll-padding-block-start scrollPaddingBlockStart















position position
scroll-padding-bottom scrollPaddingBottom















printColorAdjust

scroll-padding-inline scrollPaddingInline















quotes quotes
scroll-padding-inline-end scrollPaddingInlineEnd















r r
scroll-padding-inline-start scrollPaddingInlineStart















resize resize
scroll-padding-left scrollPaddingLeft















right right
scroll-padding-right scrollPaddingRight















rotate rotate
scroll-padding-top scrollPaddingTop















rowGap rowGap
scroll-snap-align scrollSnapAlign















rx rx
scroll-snap-stop scrollSnapStop















ry ry
scroll-snap-type scrollSnapType















scale scale
shape-image-threshold shapeImageThreshold















scrollbarColor

shape-margin shapeMargin















scrollbarGutter scrollbarGutter
shape-outside shapeOutside















scrollbarWidth

shape-rendering shapeRendering















scrollBehavior scrollBehavior
stop-color stopColor















scrollMargin scrollMargin
stop-opacity stopOpacity















scrollMarginBlock scrollMarginBlock

stroke















scrollMarginBlockEnd scrollMarginBlockEnd
stroke-dasharray strokeDasharray















scrollMarginBlockStart scrollMarginBlockStart
stroke-dashoffset strokeDashoffset















scrollMarginBottom scrollMarginBottom
stroke-linecap strokeLinecap















scrollMarginInline scrollMarginInline
stroke-linejoin strokeLinejoin















scrollMarginInlineEnd scrollMarginInlineEnd
stroke-miterlimit strokeMiterlimit















scrollMarginInlineStart scrollMarginInlineStart
stroke-opacity strokeOpacity















scrollMarginLeft scrollMarginLeft
stroke-width strokeWidth















scrollMarginRight scrollMarginRight
table-layout tableLayout















scrollMarginTop scrollMarginTop
tab-size tabSize















scrollPadding scrollPadding
text-align textAlign















scrollPaddingBlock scrollPaddingBlock
text-align-last textAlignLast















scrollPaddingBlockEnd scrollPaddingBlockEnd
text-anchor textAnchor















scrollPaddingBlockStart scrollPaddingBlockStart
text-combine-upright textCombineUpright















scrollPaddingBottom scrollPaddingBottom
text-decoration textDecoration















scrollPaddingInline scrollPaddingInline
text-decoration-color textDecorationColor















scrollPaddingInlineEnd scrollPaddingInlineEnd
text-decoration-line textDecorationLine















scrollPaddingInlineStart scrollPaddingInlineStart
text-decoration-skip-ink textDecorationSkipInk















scrollPaddingLeft scrollPaddingLeft
text-decoration-style textDecorationStyle















scrollPaddingRight scrollPaddingRight
text-decoration-thickness textDecorationThickness















scrollPaddingTop scrollPaddingTop
text-emphasis textEmphasis















scrollSnapAlign scrollSnapAlign
text-emphasis-color textEmphasisColor















scrollSnapStop scrollSnapStop
text-emphasis-position textEmphasisPosition















scrollSnapType scrollSnapType
text-emphasis-style textEmphasisStyle
















scrollTimeline
text-indent textIndent
















scrollTimelineAxis
text-justify textJustify
















scrollTimelineName
text-orientation textOrientation
















setProperty
text-overflow textOverflow















shapeImageThreshold shapeImageThreshold
text-rendering textRendering















shapeMargin shapeMargin
text-shadow textShadow















shapeOutside shapeOutside
text-transform textTransform















shapeRendering shapeRendering
text-underline-offset textUnderlineOffset
















size
text-underline-position textUnderlinePosition
















sizeAdjust

top
















speak
touch-action touchAction
















speakAs

transform















stopColor stopColor
transform-box transformBox















stopOpacity stopOpacity
transform-origin transformOrigin















stroke stroke
transform-style transformStyle















strokeDasharray strokeDasharray

transition















strokeDashoffset strokeDashoffset
transition-delay transitionDelay















strokeLinecap strokeLinecap
transition-duration transitionDuration















strokeLinejoin strokeLinejoin
transition-property transitionProperty















strokeMiterlimit strokeMiterlimit
transition-timing-function transitionTimingFunction















strokeOpacity strokeOpacity

translate















strokeWidth strokeWidth
unicode-bidi unicodeBidi
















suffix
user-select userSelect
















symbols
vector-effect vectorEffect
















syntax
vertical-align verticalAlign
















system

visibility















tableLayout tableLayout
white-space whiteSpace















tabSize tabSize

width















textAlign textAlign
will-change willChange















textAlignLast textAlignLast
word-break wordBreak















textAnchor textAnchor
word-spacing wordSpacing















textCombineUpright textCombineUpright
word-wrap wordWrap















textDecoration textDecoration
writing-mode writingMode















textDecorationColor textDecorationColor

x















textDecorationLine textDecorationLine

y















textDecorationSkipInk textDecorationSkipInk
z-index zIndex















textDecorationStyle textDecorationStyle


















textDecorationThickness textDecorationThickness


















textEmphasis textEmphasis


















textEmphasisColor textEmphasisColor


















textEmphasisPosition textEmphasisPosition


















textEmphasisStyle textEmphasisStyle


















textIndent textIndent


















textJustify



















textOrientation textOrientation


















textOverflow textOverflow


















textRendering textRendering


















textShadow textShadow



















textSizeAdjust


















textTransform textTransform


















textUnderlineOffset textUnderlineOffset


















textUnderlinePosition textUnderlinePosition



















textWrap



















timelineScope


















top top


















touchAction touchAction


















transform transform


















transformBox transformBox


















transformOrigin transformOrigin


















transformStyle transformStyle


















transition transition


















transitionDelay transitionDelay


















transitionDuration transitionDuration


















transitionProperty transitionProperty


















transitionTimingFunction transitionTimingFunction


















translate translate


















unicodeBidi unicodeBidi



















unicodeRange


















userSelect userSelect


















vectorEffect vectorEffect


















verticalAlign verticalAlign


















visibility visibility


















whiteSpace whiteSpace



















whiteSpaceCollapse


















width width


















willChange willChange


















wordBreak wordBreak


















wordSpacing wordSpacing


















wordWrap wordWrap


















writingMode writingMode


















x x


















y y


















zIndex zIndex



















zoom




Sheet 5: Prop


class Prop










name type description

PBase
Prop & Bute
Prop
Bute

Public


#getNumbers
units(f)
isProp
isBute

properties


getNumbers
count(f)


isAttribute







name
required(f)










isPBase
cut()




.units string lets the DOM deal with bad units values


#separator
getOne()




getters and setters


_seps()












join()












_mask()












_maskAll()












this.required = this.cut












get()












getMany()












static _get1()












computed()












parse()
















































methods


getn() units arg, and related functions too












only used for Hue in HSL/HWB, should be for lch/oklch too












any other use for it?












#a2N(), _2Num(), toNumby()
















































.unitz() string pseudo-getter that prefers this.func.units










"Protected"




















































Private properties










instance




























































































































































































































































































































































































































































static










































































































Sheet 6: EFactory


EFactory
o, as in: EFactorycreate(o)
implied classes





Easer sub-classes:
compute(): factor * ease value + addend








o.values
factor
addend
a/f) wins! It means all famm arg arrays are effectively dense

name description module
name type description
name type description
2D array configuration

class Ease1: raw e.value applied to 1-arg prop|func across elements
multiply(): factor * ease value










0 1 2 3 4 5 6
0 1 2
0 1 2

sparse arrays only legit as mask, and probably rarely used that way

Exported method
user-defined properties
cfg object: sub-element of o.config
er.value [elm][arg] dense









add():

ease value + addend







obj.b.true: func(
,
,
)
99
97
99
97

current values are complete, must be densified, or vice-versa

create() sub-class of EBase: Easer*, MEaser* efactory.js
prop Prop required
param number, array, null => cv 0|1|2D sparse
o.cv [elm][arg] densy

















no func, >1 args || 1 func, 1+ args




obj.b.false: 0 2





99 1 97
99 0 97
if (!mask)

Internally exported methods, by module (imported by efactory.js)
elms string, Element, collection, Elm, Elms required
calc function

cfg.param any sparse

class Ease1: raw e.value applied to 1-arg prop|func across elements

factor passed as argument when creating Easee
>1 func




obj.values[j]: 1














a) use factor/addend arrays: must be dense

getCV() gets element current values from DOM or user cv.js
func Func default: prop.func
dim int: 0-2

if (2D): [elm][arg]


class Ease1ByElm: ditto with max and/or min values by element

setting it to zero = 0 + addend, which is user error

byElm



cv[i]: N N





upDimensioning at runtime…







assumes contiguous args starting from 0

parseUn() parses current values for "unstructured"

units string, array, undefined default: prop.unitz()
hasCV bool, undefined

zEr.config() converts

class EaseN: raw e.value applied to masked args across elements














asPlug(): 0px 1px 2px




each computer with array of .true







ignores empty slots for purposes of mask

current() parses current values for not "unstructured"

multiFunc array: [mini-o]

byElm bool, undefined is 1D && byElm?
er.twoD, calc.twoD:

class EaseNByElm: ditto with max and/or min values by element

addend passed as argument when creating Easee


funcs args byElm
true: func(
px,
,
px)
order config.fa by dims to optimize running #cvDims?






b) a) or empty slots will be hard plugged

color() colors need special treatment, plus Color.js color.js
mask bitmask, array (dense|sparse)

byArg bool, undefined overlaps .byElm
simple path for 1D to 2D

class EaseValue: 1 calculated value across elements









3D: >1 >1 TRUE

1 5














2D: b.true = all indexes for e) longest or f) first factor/addend array

getFunc() gets the Func instance or defers to Color.js urcfa.js
start alias for .addend if (Is.def(end)) defaults to 0
bAbE bool, undefined is 2D && bAbE?
multi [arg][elm] dense

class EaseByElm: >1 values calculated by element














true: func( N px,1px, N px)


0 1 2 3


yuck c) longest factor/addend array = mask

urcfa() units, required, count, factor, addend

end .factor as end not distance see EFactory.#endToDist()
calc object: sub-element of ocalcs and Calc
zEr.calc() allocates

class EaseArray: >1 calculated values by arg across elements

if (Is.def(factor) && Is.def(addend)) compute*()

2D: >1 >1 FALSE

1 3





1 3




too complex d) factor/addend arrays are combed for a combined mask

optional() reduces arg count in case of optional args

flip bool untouched by EFactory, see EBase
calc function

zCalc calls c12s()

class EaseArrayByElm: 2D array of values [element][values/plugs]

if (Is.def(factor) && !Is.def(addend)) multiply*()


>1 1 TRUE









0 1 2 plug



Q: How does it affect o.set? When to cv plug?

config() builds o.config[factor, addend, max, min] config.js
useUnit bool ditto
cNN string => function

path for 1D to 2D




If (!Is.def(factor) && Is.def(addend)) add*()


1|0 >1 TRUE

0 1 2 3 4 5 6
1 plug





A: o.set defaults to E.let. If you want to overwrite, set o.set:E.set

mask() creates/validates o.mask mask.js
set char: E.set | E.net

param number, array 0|1|2D sparse
1D [arg] sparse

















obj.b.true: func(
,
,
)









if no unmasked cv args, then it doesn't matter anyway

maskCV() gets cv for config masked arguments maskCV.js
eval function user evaluate function
noop 1|2D array: [Number] outer dim sparse
2D [arg][elm] dense

Measer: multi-ease set of easers









1D: >1 1 FALSE
obj.b.false: 1






if (o.c)






I can see allowing for sparse mask, if you have one already made

endToDist() converts end to distance endToDist.js
byElm defined or not, value ignored converted to boolean: true|undefined




1D [elm] sparse


each Easy can be used by any Measer










1|0 >1 FALSE
obj.values[j]: 0 2






can't have null in 1D byElm array





It doesn't make sense to make one up, what are non-empty values?

plugCV() plugs o.value with current values by elm plugCV.js
bAbE no value: like HTML disabled ditto, by Arg by Elm




2D [elm][arg] dense


each Easy might have targets or not

if (factor === null) use current values


1|0 1 TRUE
cv[i]: N






can only 1D byElm to 2D if other fa 2D






Anything but undefined

calcEaser() instantiates an Easer calcs.js
easies array: [Easy] optional, array in mask order




or with c12s() swapping:


Measer doesn't extend Easer it has a single (T|G)Easer as .target

if (addend === null) use current values






asPlug(): 0px 1px 2px





need to check for that and error?





Q: Do factor/addend arrays have to match? Or use longest?

calcMEaser() instantiates a MEaser

peri callback runs every frame




1D [elm] sparse


Measers cannot loop by element, at least not yet









0D: 1|0 1 FALSE
true: func(
,
px,
)








A: good question, determining longest isn't much extra work.

calcByElm() instantiates an EaserByElm or MEaserByElm

factor number, array, E.currentValue the o.config family of properties:




2D [arg][elm] dense





max and min plug trues with hard values for args and elms







3






if (!o.c)









calcNoElms() instantiates a MEaser for pseudo animation

addend number, array, E.currentValue converted to cfg.param










easy.targets = [(t|g)easer]

they never represent an argument mask






true: func(0px, N px,2px)





isSame = .every()






drawback of calc all then apply all is backloading apply





max number, array, E.currentValue linked to other properties in cfg




pre-spread, if no dim swap


easy.measers = [measer]

factor and addend plug trues with 1|0 and falses with current values







1






else







but overall this method performs better





min number, array, E.currentValue





c02: pre-fill twoD with oneD


measer.easies = Map(Easy, [trueIndex])









[func][elm][arg]













isSame by arg across elms












internal properties




c12: ditto

or measer.easies = sparse array [easy, ,easy]









for each [elm][arg]




0 1 2 3 4 5


null args transposed by .true












f cfg, undefined .factor, defaults to unused










measer.target = (t|g)easer

max, min, factor addend



for each [arg]


obj.b.true:
,
,











apply()





a cfg, undefined .addend, ditto










class Easies {

If (1 elm)







obj.b.false: 0 2




0 if (o.b.true.length == 1 && isSame)







single value





c int : 0+, null argument count











this.easies = [];

If (!count)







obj.values[j]: 1







no change






spread it across .true, join it, set it across elms





r int : 1+ required arg count











this.measers = Set(measers)

single value







cv[i]: N N





if (o.b.true.length == 1 && !isSame)







1D array of values





u string, array, undefined .units, defaults to prop|func.units











this.easeEm()

else sparsify






asPlug(): 0px 1px 2px





1D o.bElm






spread it by .true, join it, set it across elms





isTo bool end not distance


















single value + mask yes

f a min max
true:
px,
,
px

if (o.b.true.length > 1 && isSame)







1D single value by elm





l int : o.elms.length number of elements




call bool() post optional()?



Teaser: user needs a way to specify that mask/args should be processed as Geaser







array by arg + mask yes
#cvDims() x x x x

0 4






1D






spread it across .true by elm, join it by elm, set it by elm





lm int : o.mask.length number of masked arguments




would save trimming arrays



User or code might want a way to force Easer if only one func (cv one func too if let())







array by arg, optionally sparse

#cvFill()




true: N px,2px N px



if (o.b.true.length > 1 && !isSame)







1D array of values by elm





lz int : o.easies.length number of easies for Measer*




review o.set == E.set












else

or #fill() x x x x

0 2






2D






spread it by .true by elm, join it by elm, set it by elm





cv array: [[String]], byElmByArg parsed DOM current values




means no cv plug, right?



No function, single arg = no array.join()






spread to elms If (!count)

faDims is the wrinkle





















compute()





cvRaw array: [String], byElm raw current values†




E.net requires .true mask



1D array by elm = no array.join()






yes single value yes
faCV == 2 makes little sense to me





0 1 2 3 4


max 00 01 02 11 12 22

9 funcs for [add, multiply, compute] * [value, 1D, 2D]





seps
prop.getUn() properties:









any function or >1 args = array.join("")







array by element, optionally sparse

mmCV == 2 && dmax = 0 is user error




obj.b.true:
,
,



min 00 01 02 11 12 22

factor or addend spread to fill arrays to match more dims





lens











multi-function has extra parsing







else

mmCV == 2 && dmax > 0 will be rare




obj.b.false: 1






maxMin 00 01 02 11 12 22

max & min = 12 or 18 funcs, spread depends on that





numBeg






#legText() might be excessive



Geaser is a whole other type of parsing






yes single value + mask yes






obj.values[j]: 0 2














result is value, 1D, or 2D





numEnd array: [int]





should maybe be eliminated



if [mask] and not multi-function, it's Geaser style






yes array by arg + mask yes
config.fa.dims: config.fa.forEach(#cvDims)




cv[i]: N





1 if (o.byElm)







1D is by arg or by elm, compute doesn't care





config array: [cfg], famm order all cfgs, dense









if [func][mask] for multi-func, then Geaser style






yes 1D array by arg

#[cv]fill()




asPlug(): 0px 1px 2px





no change












configCV array: [cfg], famm order cfgs that use E.currentValue, dense

raf





need for a "preserveUnits" arg to use cv units







1D array by elm + mask yes
config.max: #cvDims(config.fa.dims)




true:
,
px,




if (b.true.length == 1)












dims array: [int 0-2] each cfg.dim in famm order

apps
unused Easy properties:












2D array

config.min: #cvDims(config.fa.dims)





3








no change, but transpose by .true











dmax int : 0-2 max dimensionality of cfgs

easings
.wait recycle/easeSteps











2D array + mask yes






true: 0px, N px,2px




if (isSame)













dmin int : 0-2 min dimensionality of cfgs

multi
.time


























1







no change












value array: [[String]], byElmByArg


color
.type


































if (!isSame)













oneD array: [Number] or [[Number]] for o.calcByElm

docs
.start



































2D












twoD array: [[Number]]


src
.end

















































l1 int : 1+ o.twoD inner dimension length

prop
.dist

















































l2 int : 1+ o.twoD outer dimension length

easy
.io unused by leg too
















































calcs array: [calc] array of calc objects for #calc*()

efactory

except in #reverseLeg
















































calcByElm bool set in #calcByElm() read in EBase

easer
unused leg properties

















































loopByElm bool linked to parent easy.#loopByElm

alt
.waits steps only
















































ezToMask Map(Easy, [int 0-N, dense]) index into o.mask, not arg indexes



.timing ditto
















































bySame bool see EFactory.#bySame()



.easy ditto
















































oneArg bool see EFactory.#maskCV()






















































hasEasies bool


efactory
x = don't export


















































alt user property names

efactory.js create()



















































elms .elm, .element, .elements


cv.js getCV()



















































easies .easy (for multiFunc sub-objects only)



parseUn()



















































eval .evaluator



current()



















































byElm .byElement



validCount() x
























































typeError() x


















































bAbE .byArgByElm


color.js color()



















































factor .end, .dist, .distance



cjsTo()



















































addend .start



isCjs() x


















































multiFunc sub-object additional properties


isCjsSpace() x


















































isMultiFunc bool


urcfa.js getFunc()



















































bySameByArg bool



urcfa()



















































footnotes


optional()





















































† created but currently unused


fa() x
























































faToNumber() x



















































cNoTime 3

config.js config()




















































fpl60hz 50.0000


paramLength() x



















































leftover 99

mask.js mask()




















































leftover / fpl60hz 1.98

maskCV.js maskCV()





















































16.3333


mapMask() x
























































isSameByArg() x
























































isSameByElm() x
























































allMustHaveValues() x
























































mustHaveValues() x
























































mustBeNumber() x
























































minArgs() x























































endToDist.js endToDist()

























































toDistMap() x
























































toDistVal() x
























































toDistDefZero() x
























































defaultToZero() x
























































zeroToUndefined() x
























































spliceMask() x























































plugCV.js plugCV()
























































calcs.js calcEaser()

























































calcMEaser()

























































calcByElm()

























































calcNoElms()

























































init_calc() x
























































calcNoDims() x
























































prepCalc() x
























































setCalc() x
























































noop1D() x
























































noop2D() x
























































meNoop1D() x
























































meNoop2D() x
























































meParam() x
























































swapDims() x
























































upDim() x














































Sheet 7: cfg.param

cfg.param is created and used by Efactory












































mixing bEbA with bAbE is unlikely, and avoidable via Ez.swapDims(), thus unsupported














Calc.#twoD defaults to bAbE because that's the way multiFunc/Ease requires it







































bEbA
twoD = bAbE
these examples use factor, even if it's not possible to do so in reality





















bEbA elm0 elm1 elm2
calc param cNN
calc param cNN var dim++ .noop
factor is always first, so always c0N, but * is best as example




















c12()
0 1 2 0 1 2 0 1 2
0 0 c00
0 0 c00 value


c01s











c12s()
7 7 7 8 8 8 9 9 9
0 byArg c01
0 byArg c01s twoD 2 x
thisVal 2































byArg byArg c11
0 byElm c01 oneD 1 x
byArg 1 2 3

















c12() byArg 0 1 2










0 bAbE c02 twoD 2 x
twoD arg0 arg1 arg2











c12s() byElm 7 8 9










0 bEbA c02s twoD 2 x

2 2 2 4 4 4 6 6 6



























byElm 0 c10 oneD


c02s















bAbE arg0 arg1 arg2




byElm byArg c11s twoD 1 x
thisVal 2



















c12()
7 8 9 7 8 9 7 8 9




byElm byElm c11 oneD


bEbA elm0 elm1














c12s()
0 0 0 1 1 1 2 2 2




byElm bAbE c12 twoD 1 x

1 2 3 4 5 6






























byElm bEbA c12s twoD 1 x
twoD arg0 arg1 arg2














c12() byElm 7 8 9










bAbE 0 c20 twoD


[a][e] 2 8 4 10 6 12














c12s() byArg 0 1 2










bAbE byArg c21s twoD


c11s



























bAbE byElm c21 twoD


oneD 1 2 3 (byElm)
































bAbE bAbE c22 twoD


byArg 4 u 5


















oneD func0 func1 func2





bAbE bEbA c22s twoD


twoD arg0 arg1 arg2












param 0 _ 2 _ 1 0 1 _












[a][e] 4 8 12 1 2 3 5 10 15












offset 0 _ 2 _ 4 5 6 _





current value dim++

c12s
c12


noop 1

3
7







E.cV args elms dims type

oneD 1 2 3 (byElm)





oneD 1 2 3 (byElm)





















0 1 1 0 0

bEbA elm0 elm1 elm2
bAbE arg0 arg1 arg2


twoD func0 func1 func2





0 N 1 1 byArg


1 2 3 4 5 6 7 8 9

1 2 3 4 5 6 7 8 9


param 0 _ 2 _ 1 0 1 _





0 N N 2 bEbA

twoD arg0 arg1 arg2
twoD arg0 arg1 arg2


offset 0 _ 2 _ 4 5 6 _





byArg N 1 1 byArg

[a][e] 1 8 21 2 10 24 3 12 27
[a][e] 1 4 9 4 10 18 7 16 27


noop0 _ x











byArg N N 2 bEbA

c21s
c21


noop1 _ _ _ x









byElm 1 N 1 byElm

twoD arg0 arg1 arg2
twoD arg0 arg1 arg2


noop2 _ _ _ _ _ _ _ x





byElm N N 2 bEbA


1 2 3 4 5 6 7 8 9

1 2 3 4 5 6 7 8 9

















bEbA N N 2 bEbA

byArg 1 2 3






byElm 1 2 3






















bAbE N N 2 bAbE

twoD arg0 arg1 arg2
twoD arg0 arg1 arg2













start|addend:E.cV makes the most sense, start at current value









[a][e] 1 2 3 8 10 12 21 24 27
[a][e] 1 4 9 4 10 18 7 16 27













factor:E.cV & addend:E.cV is plausible









c22s























for example: increase values by 50% with easy={start:0, end:0.5}









twoD arg0 arg1 arg2























end:cV makes no sense if easy.end == 1










1 2 3 4 5 6 7 8 9























I can see max or min:E.cV to delay starting or stop during









bEbA elm0 elm1 elm2























both max and min with cv only makes if selectively applied by arg or elm










1 2 3 4 5 6 7 8 9























factor/addend and max/min with cv makes no sense









twoD arg0 arg1 arg2























no way to cross the max/min threshold when you start or end there









[a][e] 1 8 21 8 25 48 21 42 81























maybe factor, but only as distance, and even then that's pretty weird





































































































































start [byArg]


ditto




index 0 1 2 3 4 5 6

























end E.cV = [2 x [byArg]]

[byArg]




param a b c d




























elms 2 x cssRule


2 x <input>




range 2 3 4 5







































i++ N N Y Y







































del idx Y Y N N







































param

a b c d














Sheet 8: dim Actual

Dimensionalities for each cfg.param in Efactory























































Actual matrix of array types: mixing bEbA with bAbE is unlikely, and avoidable via Ez.swapDims(), thus unsupported
Non-MultiFunc/Ease, Non-LoopByElm

0 byArg byElm bEbA bAbE





total
dimensionality







dims twoD calc


dimensions twoD calcs pre-conversions
dimensions twoD calcs pre-conversions

x









x1 5
same up down mix







0 bEbA c00() noop()

0 byArg byElm bAbE c00() c01() c12s() byElm -> bAbE

0 byArg byElm bEbA bEbA c00() c01() c12() c22() byElm -> bEbA




x








x2 18
2 8 8 0







byArg bEbA c11()


0 byArg bEbA bEbA c00() c01() c12()


0 byElm byArg bEbA bEbA c00() c01() c12s() c22() byArg -> bEbA





x







x3 42

10 10 22







byElm bAbE c11()


0 byArg bAbE bAbE c00() c01() c12s()


0 byArg bEbA byElm bEbA c00() c01() c12() c22() byElm -> bEbA






x






x4 48

2 2 44







bEbA bEbA c22()


0 byElm bEbA bEbA c00() c01() c12s()


0 byElm bEbA byArg bEbA c00() c01() c12s() c22() byArg -> bEbA







x






113
2 20 20 66







bAbE bAbE c22()


0 byElm bAbE bAbE c00() c01() c12()


0 bEbA byArg byElm bEbA c00() c02() c22() c22() byArg -> bEbA byElm -> bEbA


x x



0 byArg byArg 0





















byArg byElm bEbA bEbA c01() c12() c22() byElm -> bEbA

0 bEbA byElm byArg bEbA c00() c02() c22() c22() byElm -> bEbA byArg -> bEbA


x
x


0 byElm byElm 0














dimensions twoD calcs pre-convert
byArg byElm bAbE bAbE c01() c12s() c22() byElm -> bAbE

byArg 0 byElm bEbA bEbA c01() c11() c12() c22() 0 -> byArg byElm -> bEbA


x

x

0 bEbA bEbA 0














0 byArg bEbA c00() c01()

0 byElm byArg bEbA c00() c01() c12s() byArg -> bEbA

byArg 0 bEbA byElm bEbA c01() c11() c12() c22() 0 -> byArg byElm -> bEbA






x
0 bAbE bAbE 0














0 byElm bAbE c00() c01()

0 bEbA byArg bEbA c00() c02() c22() byArg -> bEbA

byArg byElm 0 bEbA bEbA c01() c12() c22() c22() byElm -> bEbA 0 -> bEbA



x x


byArg byElm byElm byArg














0 bEbA bEbA c00() c02()

0 bAbE byArg bAbE c00() c02() c22() byArg -> bAbE

byArg byElm bEbA 0 bEbA c01() c12() c22() c22() byElm -> bEbA 0 -> bEbA



x
x

byArg bEbA bEbA byArg














0 bAbE bAbE c00() c02()

0 bEbA byElm bEbA c00() c02() c22() byElm -> bEbA

byArg bEbA 0 byElm bEbA c01() c12() c22() c22() 0 -> bEbA byElm -> bEbA



x

x
byArg bAbE bAbE byArg














byArg byElm bAbE c01() c12s() byElm -> bAbE
0 bAbE byElm bAbE c00() c02() c22() byElm -> bAbE

byArg bEbA byElm 0 bEbA c01() c12() c22() c22() byElm -> bEbA 0 -> bEbA




x x

byElm bEbA bEbA byElm














byArg bEbA bEbA c01() c12()

byArg bEbA byElm bEbA c01() c12() c22() byElm -> bEbA

byElm byArg 0 bEbA bEbA c01() c12s() c22() c22() byArg -> bEbA 0 -> bEbA




x
x
byElm bAbE bAbE byElm














byArg bAbE bAbE c01() c12s()

byArg bAbE byElm bAbE c01() c12s() c22() byElm -> bAbE

byElm byArg bEbA 0 bEbA c01() c12s() c22() c22() byArg -> bEbA 0 -> bEbA


x x x


0 byArg byElm 0 byElm byArg byArg 0 byElm byArg byElm 0 byElm 0 byArg byElm byArg 0
byElm bEbA bEbA c01() c12s()

byArg 0 byElm bAbE c01() c11() c12s() 0 -> byArg byElm -> bAbE
byElm 0 byArg bEbA bEbA c01() c11() c12s() c22() 0 -> byElm byArg -> bEbA


x x
x

0 byArg bEbA 0 bEbA byArg byArg 0 bEbA byArg bEbA 0 bEbA 0 byArg bEbA byArg 0
byElm bAbE bAbE c01() c12()

byArg 0 bEbA bEbA c01() c11() c12() 0 -> byArg

byElm 0 bEbA byArg bEbA c01() c11() c12s() c22() 0 -> byElm byArg -> bEbA


x x

x
0 byArg bAbE 0 bAbE byArg byArg 0 bAbE byArg bAbE 0 bAbE 0 byArg bAbE byArg 0
byArg 0 bEbA c01() c11() 0 -> byArg
byArg 0 bAbE bAbE c01() c11() c12s() 0 -> byArg

byElm bEbA byArg 0 bEbA c01() c12s() c22() c22() byArg -> bEbA 0 -> bEbA


x
x x

0 byElm bEbA 0 bEbA byElm byElm 0 bEbA byElm bEbA 0 bEbA 0 byElm bEbA byElm 0
byElm 0 bAbE c01() c11() 0 -> byElm
byElm 0 bEbA bEbA c01() c11() c12s() 0 -> byElm

byElm bEbA 0 byArg bEbA c01() c12s() c22() c22() 0 -> bEbA byArg -> bEbA


x
x
x
0 byElm bAbE 0 bAbE byElm byElm 0 bAbE byElm bAbE 0 bAbE 0 byElm bAbE byElm 0
bEbA 0 bEbA c02() c22() 0 -> bEbA
byElm 0 bAbE bAbE c01() c11() c12() 0 -> byElm

bEbA byArg byElm 0 bEbA c02() c22() c22() c22() byArg -> bEbA byElm -> bEbA 0 -> bEbA


x x x

byArg byElm bEbA byArg bEbA byElm byElm byArg bEbA byElm bEbA byArg bEbA byArg byElm bEbA byElm byArg
bAbE 0 bAbE c02() c22() 0 -> bAbE
byElm byArg bEbA bEbA c01() c12s() c22() byArg -> bEbA

bEbA byArg 0 byElm bEbA c02() c22() c22() c22() byArg -> bEbA 0 -> bEbA byElm -> bEbA


x x
x
byArg byElm bAbE byArg bAbE byElm byElm byArg bAbE byElm bAbE byArg bAbE byArg byElm bAbE byElm byArg
byElm byArg bEbA c01() c12s() byArg -> bEbA
byElm byArg bAbE bAbE c01() c12() c22() byArg -> bAbE

bEbA byElm byArg 0 bEbA c02() c22() c22() c22() byElm -> bEbA byArg -> bEbA 0 -> bEbA

x x x x

0 byArg byElm bEbA 0 byArg byElm bAbE










bEbA byArg bEbA c02() c22() byArg -> bEbA
byArg byElm 0 bAbE c01() c12s() c22() byElm -> bAbE 0 -> bAbE
bEbA byElm 0 byArg bEbA c02() c22() c22() c22() byElm -> bEbA 0 -> bEbA byArg -> bEbA

x x x
x
0 byElm byArg bEbA 0 byElm byArg bAbE










bAbE byArg bAbE c02() c22() byArg -> bAbE
byArg bEbA 0 bEbA c01() c12() c22() 0 -> bEbA

bEbA 0 byArg byElm bEbA c02() c22() c22() c22() 0 -> bEbA byArg -> bEbA byElm -> bEbA







0 byArg bEbA byElm 0 byArg bAbE byElm










bEbA byElm bEbA c02() c22() byElm -> bEbA
byArg bAbE 0 bAbE c01() c12s() c22() 0 -> bAbE

bEbA 0 byElm byArg bEbA c02() c22() c22() c22() 0 -> bEbA byElm -> bEbA byArg -> bEbA







0 byElm bEbA byArg 0 byElm bAbE byArg










bAbE byElm bAbE c02() c22() byElm -> bAbE
byElm bEbA 0 bEbA c01() c12s() c22() 0 -> bEbA

0 byArg byElm bAbE bAbE c00() c01() c12s() c22() byElm -> bAbE









0 bEbA byArg byElm 0 bAbE byArg byElm

















byElm bAbE 0 bAbE c01() c12() c22() 0 -> bAbE

0 byElm byArg bAbE bAbE c00() c01() c12() c22() byArg -> bAbE









0 bEbA byElm byArg 0 bAbE byElm byArg

















byElm bEbA byArg bEbA c01() c12s() c22() byArg -> bEbA

0 byArg bAbE byElm bAbE c00() c01() c12s() c22() byElm -> bAbE









byArg 0 byElm bEbA byArg 0 byElm bAbE










MultiFunc/Ease always uses bAbE





byElm bAbE byArg bAbE c01() c12() c22() byArg -> bAbE

0 byElm bAbE byArg bAbE c00() c01() c12() c22() byArg -> bAbE









byArg 0 bEbA byElm byArg 0 bAbE byElm










LoopByElm is bEbA





byElm 0 byArg bEbA c01() c11() c12s() 0 -> byElm byArg -> bEbA
0 bAbE byArg byElm bAbE c00() c02() c22() c22() byArg -> bAbE byElm -> bAbE








byArg byElm 0 bEbA byArg byElm 0 bAbE

















bEbA 0 byArg bEbA c02() c22() c22() 0 -> bEbA byArg -> bEbA
0 bAbE byElm byArg bAbE c00() c02() c22() c22() byElm -> bAbE byArg -> bAbE








byArg byElm bEbA 0 byArg byElm bAbE 0

















bAbE 0 byArg bAbE c02() c22() c22() 0 -> bAbE byArg -> bAbE
byArg 0 byElm bAbE bAbE c01() c11() c12s() c22() 0 -> byArg byElm -> bAbE








byArg bEbA 0 byElm byArg bAbE 0 byElm

















bEbA 0 byElm bEbA c02() c22() c22() 0 -> bEbA byElm -> bEbA
byArg 0 bAbE byElm bAbE c01() c11() c12s() c22() 0 -> byArg byArg -> bAbE








byArg bEbA byElm 0 byArg bAbE byElm 0

















bAbE 0 byElm bAbE c02() c22() c22() 0 -> bAbE byElm -> bAbE
byArg byElm 0 bAbE bAbE c01() c12s() c22() c22() byElm -> bAbE 0 -> bAbE








byElm byArg 0 bEbA byElm byArg 0 bAbE

















bEbA byArg byElm bEbA c02() c22() c22() byArg -> bEbA byElm -> bEbA
byArg byElm bAbE 0 bAbE c01() c12s() c22() c22() byElm -> bAbE 0 -> bAbE








byElm byArg bEbA 0 byElm byArg bAbE 0

















bAbE byArg byElm bAbE c02() c22() c22() byArg -> bAbE byElm -> bAbE
byArg bAbE 0 byElm bAbE c01() c12s() c22() c22() 0 -> bAbE byElm -> bAbE








byElm 0 byArg bEbA byElm 0 byArg bAbE

















byElm byArg 0 bEbA c01() c12s() c22() byArg -> bEbA 0 -> bEbA
byArg bAbE byElm 0 bAbE c01() c12s() c22() c22() byElm -> bAbE 0 -> bAbE








byElm 0 bEbA byArg byElm 0 bAbE byArg

















bEbA byArg 0 bEbA c02() c22() c22() byArg -> bEbA 0 -> bEbA
byElm byArg 0 bAbE bAbE c01() c12() c22() c22() byArg -> bAbE 0 -> bAbE








byElm bEbA byArg 0 byElm bAbE byArg 0

















bAbE byArg 0 bAbE c02() c22() c22() byArg -> bAbE 0 -> bAbE
byElm byArg bAbE 0 bAbE c01() c12() c22() c22() byArg -> bAbE 0 -> bAbE








byElm bEbA 0 byArg byElm bAbE 0 byArg

















bEbA byElm 0 bEbA c02() c22() c22() byElm -> bEbA 0 -> bEbA
byElm 0 byArg bAbE bAbE c01() c11() c12() c22() 0 -> byElm byArg -> bAbE








bEbA byArg byElm 0 bAbE byArg byElm 0

















bAbE byElm 0 bAbE c02() c22() c22() byElm -> bAbE 0 -> bAbE
byElm 0 bAbE byArg bAbE c01() c11() c12() c22() 0 -> byElm byArg -> bAbE








bEbA byArg 0 byElm bAbE byArg 0 byElm

















bEbA byElm byArg bEbA c02() c22() c22() byElm -> bEbA byArg -> bEbA
byElm bAbE byArg 0 bAbE c01() c12() c22() c22() byArg -> bAbE 0 -> bAbE








bEbA byElm byArg 0 bAbE byElm byArg 0

















bAbE byElm byArg bAbE c02() c22() c22() byElm -> bAbE byArg -> bAbE
byElm bAbE 0 byArg bAbE c01() c12() c22() c22() 0 -> bAbE byArg -> bAbE








bEbA byElm 0 byArg bAbE byElm 0 byArg



























bAbE byArg byElm 0 bAbE c02() c22() c22() c22() byArg -> bAbE byElm -> bAbE 0 -> bAbE







bEbA 0 byArg byElm bAbE 0 byArg byElm



























bAbE byArg 0 byElm bAbE c02() c22() c22() c22() byArg -> bAbE 0 -> bAbE byElm -> bAbE







bEbA 0 byElm byArg bAbE 0 byElm byArg



























bAbE byElm byArg 0 bAbE c02() c22() c22() c22() byElm -> bAbE byArg -> bAbE 0 -> bAbE











































bAbE byElm 0 byArg bAbE c02() c22() c22() c22() byElm -> bAbE 0 -> bAbE byArg -> bAbE











































bAbE 0 byArg byElm bAbE c02() c22() c22() c22() 0 -> bAbE byArg -> bAbE byElm -> bAbE











































bAbE 0 byElm byArg bAbE c02() c22() c22() c22() 0 -> bAbE byElm -> bAbE byArg -> bAbE

























































Sheet 9: p&s


numBeg numEnd m0 mL
Plug & Squeeze
see Efactory: plugCV() and parseUn()












T F o.c mask: [0, 2]
i j t m












FALSE TRUE !nb !ne 5 [0, 1, 2, 3, 4] 0 0 0 0












FALSE TRUE !nb !ne - S S S S * 2 1 2 1












FALSE TRUE !nb !ne
N V N V
4 3 4 2












TRUE FALSE nb !ne 4 [0, 1, 2, 3]
1 1 2 1












TRUE FALSE nb !ne - - S S S S 3 3 4 2












TRUE FALSE nb !ne
N V N V
- - - -












FALSE FALSE !nb !ne 5 [0, 1, 2, 3, 4] 0 0 0 0












FALSE FALSE !nb !ne - S S S S S 2 1 2 1












FALSE FALSE !nb !ne
N V N V
4 3 4 2












TRUE TRUE nb !ne 4 [0, 1, 2, 3]
1 1 2 1












TRUE TRUE nb !ne - - S S S * 3 3 4 2












TRUE TRUE nb !ne
N V N V
- - - -









































T T o.c mask: [0, 3]
i j t m












FALSE TRUE !nb ne 4 [0, 1, 2, 3]
0 0 0 0












FALSE TRUE !nb ne - S S S S
2 1 3 1












FALSE TRUE !nb ne
N V V N
- - - -












TRUE FALSE nb !ne 4 [0, 1, 2, 3]
1 1 3 1












TRUE FALSE nb !ne - - S S S S 3 4 4 2












TRUE FALSE nb !ne
N V V N
- - - -












FALSE FALSE !nb !ne 5 [0, 1, 2, 3, 4] 0 0 0 0












FALSE FALSE !nb !ne - S S S S S 2 1 3 1












FALSE FALSE !nb !ne
N V V N
4 4 4 2












TRUE TRUE nb ne 3 [0, 1, 2]

1 1 3 1

ln = o.cv.nums.length = 4









TRUE TRUE nb ne - - S S S
- - - -












TRUE TRUE nb ne
N V V N
- - - -

if (o.cv.numEnd && !ne) // 25% of the possible cases


























o.cv.seps.forEach((arr) => { arr.push(""); });










F T o.c mask: [1, 3]
i j t m












FALSE TRUE !nb ne 4 [0, 1, 2, 3]
0 0 1 0

i = 0;









FALSE TRUE !nb ne - S S S S
2 2 3 1

j = 0;









FALSE TRUE !nb ne
V N V N
- - - -

if (o.cv.numBeg) {









TRUE FALSE !nb !ne 5 [0, 1, 2, 3, 4] 0 1 1 0


if (nb)
// if (m0) would be the same






TRUE FALSE !nb !ne - - S S S S 2 2 3 1



i++;







TRUE FALSE !nb !ne
V N V N
4 4 4 2


else








FALSE FALSE !nb !ne 5 [0, 1, 2, 3, 4] 0 0 1 0



arr[i] = o.cv.vals[j];







FALSE FALSE !nb !ne - S S S S S 2 2 3 1


j++;








FALSE FALSE !nb !ne
V N V N
4 4 4 2

}









TRUE TRUE !nb ne 4 [0, 1, 2, 3]
0 1 1 0

for (m = i; i < o.c; i += 2, j++, m++) {









TRUE TRUE !nb ne - - S S S
2 2 3 1


t = m < o.lt ? o.mask[m] : ln;








TRUE TRUE !nb ne
V N V N
- - - -


while (j < t)


























arr[i] += o.cv.seps[j] + o.cv.vals[j++];









F F o.c mask: [1, 2]
i j t m


arr[i] += o.cv.seps[j];








FALSE TRUE !nb !ne 5 [0, 1, 2, 3, 4] 0 0 1 0

}









FALSE TRUE !nb !ne - S S S S * 2 2 2 1












FALSE TRUE !nb !ne
V N N V
4 3 4 2












TRUE FALSE !nb !ne 5 [0, 1, 2, 3, 4] 0 1 1 0












TRUE FALSE !nb !ne - - S S S S 2 2 2 1












TRUE FALSE !nb !ne
V N N V
4 3 4 2












FALSE FALSE !nb !ne 5 [0, 1, 2, 3, 4] 0 0 1 0












FALSE FALSE !nb !ne - S S S S S 2 2 2 1












FALSE FALSE !nb !ne
V N N V
4 3 4 2












TRUE TRUE !nb !ne 5 [0, 1, 2, 3, 4] 0 1 1 0












TRUE TRUE !nb !ne - - S S S * 2 2 2 1












TRUE TRUE !nb !ne
V N N V
4 3 4 2

















































































if (numbBeg) start with vals






else start with seps


























isep: 0

















ival: 0





ival: 0

















isep: 0





iarr: 0

















iarr: nb ? 1 : 0





imask: 0

















imask: nb ? 1 : 0








Sheet 10: Easer


class EBase
Easer and MEaser classes

wait pause time first loop 1st diff remainder
Pseudo-Animation

name type description
name type description

20 10 100 120 110 0 -10
Easies easy._easeMe() only, no targets

Public
class Easer
extends EBase

15 20 80 95 100 25 5
[M]Easer #runPeri() - only matters if you have config:famm

getters
apply() undefined public, called by Easy.prototype.easeMe()

10 20 90 100 110 20 0

e.g. multi-arg irrelevant if no famm or only 1 famm

elmCount int read-only, number of elements
#calc Calc private, single instance of Calc

10

120 1
FALSE

should I remove duplicate famm by arg? Probably not

isEaser bool read-only, always returns true
class EaserByElm
extends EBase










but famm args don't have to relate to prop args

methods
apply() undefined ditto










minimum object for create(object) is {peri:…}

evaluate() e.value

#calcs array: [Calc] length = #cElms










if (maskCV or plugCV) needs elms or cV

set() undefined

class EaserMulti
extends EBase










if (elms) it needs prop

setOneElm() undefined

apply() undefined ditto












"Protected" property
#calcs array: [Calc] length = o.multiFunc.length
a) what to apply to elm









_iElm() int index shared with ByElm sub-classes
class EaserMultiByElm
extends EBase
b) when and what to apply to 2nd elm when to ++iElm









Private
apply() undefined ditto
c) what to apply to each elm if 2









properties
#calcs array: [[Calc]] by element by f of multiFunc: [elm[f]]












#calc Calc single instance of Calc
class MEBase extends EBase












#cElms int element count
mevaluate() array: [e.value] wraps this.evaluate() byEasy












#elms array: [Element]

.easies Easies read-only getter

Multi-Ease test page (test/multi.html):






getEasies() called by getName() and end of

#flip bool

#easies Easies private

virgin user:






loadCommon() or after presets have loaded.

#mask array: [int] masked argument indexes into #value
.isMEaser bool read-only, always returns true


load presets








#oneD


class MEaser
extends MEBase


load named easies





objFromCtrls()

#peri user callback runs once per set() or setOneElm()
apply() undefined public, called by Easies.prototype.easeEm()


1st option selected by default





returns: [{name:{easy}}, …]

#prop


#calcs array: [Calc] length = o.lz aka o.easies.length


display each easy's properties (all the same)








#twoD


class MEaserByElm
extends MEBase

return user:







574

#uEval


apply() undefined ditto


load named easies






56

#value


#calcs array: [[Calc]] by element by ez of #easies: [elm[ez]]


select most recent value for each easies <select>






630

instance methods
class MEaserMulti
extends MEBase


display current settings for each easy








#evalBasic()


apply() undefined ditto












#evalUnit()


#calcs



onchange:









#evalUser()


class MEaserMultiByElm
extends MEBase


newEasies()








#evalBoth()


apply() undefined ditto


reset each bar of polygon to start or end








#assign()


#calcs




localStorage.setItem()








static methods















#assignByArgByElm()
static
Color properties/functions, Ez.toNumby(fromColor()), mask:[0,1,2] vs mask:[0,1,2,3]:












#assignByElmByArg()
static
if (addend.c == 3 && factor.c == 4) factor has alpha, addend doesn't












#assignToElm()
static
plug alpha (4th arg) with 1 prior to assigning separators















if (addend.c == 4 && factor.c == 3) addend has alpha, factor doesn't















don't create a calc object for factor












Sheet 11: ECalc


class ECalc

How many permutations?




name type description

dims configs



Public methods

0 f



calculate()



1 a



static f()
factor = multiply

1s max



static a()
addend = add

2 min



Private

2s noop



properties







#calcs array: [calc object] one per config, famm order is critical

16




#oneD



c00 f,noop a,noop max,noop min,noop

#twoD



c01




#value



c01s




calc by dimensionality methods: cNN

c02




#noop()



c02s




#c00()



c10




#c01()



c11




#c01s()
the "s" is for "swap" dimensions

c11s




#c02()



c12




#c02s()



c12s




#c10()



c20




#c11()



c21




#c11s()



c21s




#c12()



c22




#c12s()



c22s




#c20()



noop




#c21()









#c21s()









#c22()









#c22s()









first alternative: f, a, max, min







#noop()
still calls 1-4 functions every frame







#f()
duplicate dimensionality code







#a()









#max()









#min()









second alternative: famm (6 x f, 6 x a, 4 x m, 4 x mm)







#noop()
one function call does it all







#f()
duplicate dimensionality code in every one,







#a()
and it's cross-param dimensionality which







#m()
means the longer the function name, the







#fa()
more permutations, thus more code.







#fm()









#am()









#mm()









#fam()









#fmm()









#amm()









#famm()





























Sheet 12: EBezier


class EBezier

Public

name type description

constructor(x1, y1, x2, y2, time)
~= CSS cubic-bezier(x1, y1, x2, y2)

time int ms setter-only, calculates #accuracy

solve() float solves the cubic bezier for x

Private

properties

#accuracy float calculated w/user input by set time()

#ax float


#ay float


#bx float


#by float


#cx float


#cy float


instance methods

#sampleCurveX()



#sampleCurveY()



#sampleCurveDerivativeX()



#solveCurveX(x)











Sheet 13: Easy


class Easy









increment:



1 0.5 0.5

leg[0].start overrides this.start




cumulative:


E.steps roundTrip


Public










other types have time


0.25 0.75 0.25

leg.at(-1).end overrides this.end
leg wait time total wait time

{steps:1, jump:E.start}




getters and setters
obj: constructor(obj)
implied class: leg object


increment has time or count



0.75 50%

this.zero is end of leg.wait
0 100 1000 1100 0 100

firstLeg lastLeg



name type description
name type description
name type description


arrived = time or endpoint


0.25 0.75 50%

now is relative to leg.time
1 200 500 700 1100 1300
leftover 2000




time int ms read-write, sets leg.time or {E.steps}.wait
time int ms required for non-incremental
type int enum required, preserved by #reverseMe()


if time, roundTrip ends vary


0.25 0.75


AFrame.start()
2 300 2000 2300 1800 2100
wait 0 0



wait int ms read-write, setter calculates firstLeg.wait
wait int ms default: 0
time int > 0 required for non-increment, preserved


roundTrip can't mix time & count


0.25 0.75


this.zero = timeStamp + this.wait

600 3500 4100


rtWait 0 2000



loopWait int ms read-write, setter adjusts #totalWait
loopWait int ms wait time before starting a looped playback
count int > 0 semi-required by increment, preserved


impossible to set endpoints



1.000000


Easy.easeMe()














total int ms read-only, full duration, time + totalWait
tripWait int ms auto-trip pause, before heading inbound
wait int >= 0



can't have .wait with end



TRUE


if (timeStamp <= this.zero)

tS now zero









plays int read-write, returns #playz, ignoring #loopByElm
start number default: 0
start number



it's either time or no time
ez:





now = timeStamp - this.zero
start() 0 -100 100









loopByElm bool read-write
end number default: 1
end number end value for this leg


too much code to deal with it
.time
1000



Easy.ease()
leg[0] 150 50 100









inbound bool read-only, vs outbound, round-trip direction
downward defined, no value default: false
unit number 0-1 end unit interval for this leg


multi-leg can't mix time & end
.start
50.0



if (now > leg.time) {
leg[0] 500 400 100









roundTrip bool read-write, at end return to start, now or later
type int: E.type default: linear, pow:1
down bool direction of unit interval


possible, but burdens other
.dist
31.5



do
leg[0] 1099 999 100



leg0 leg1 leg2


tripWait int ms read-write, the auto-trip pause time
pow number these four are mutually exclusive:
dist number > 0 distance between start and end


types with extra code.
.end
81.5



now -= leg.time
leg[0] 1101 1001 100


leftover 500 250 1000


autoTrip bool read-write, auto-return to start
steps array in steps(): leg["steps"].slice()
part number 0-1 this leg's part of the whole


very obscure, not worth it
leg:





this.zero += leg.time
leg[1]
1 1100


wait 25 100 200




(!autoTrip && roundTrip && plays > 1) is not allowed
bezier array or EBezier [0-1, 0-1, 0-1, 0-1]; 0-1 is a soft range.
prev leg object legs form linked lists


workaround via multiple
.total 0 250 600 1000

leg = leg.next



1300


rtWait 600 450 1000


pre callback called just prior start of animation
increment number

next ditto



animations and .post()
.time 0 250 350 400

this.zero += leg.wait
leg[1] 1300 0 1300









peri callback called once per frame
io int enum E.in .out .inOut .outIn: no Easy property
ease
the easing function to call




.dist 0 7.88 11.03 12.60

b = now > leg.time + leg.wait
leg[1] 1849 549 1300









post callback called when animation arrives
plays int defaults to .loops + 1 || .repeats + 1 || 1
io int E.in or E.out temporary until #reverseMe() called

steps:

.start 50.0 50.00 57.88 68.90

if (b)
leg[1] 1851 551 1300



3 3 3 2 4

loop callback called when playback loops
loopByElm bool loop by element
pow number not 0



duration = time
121





now -= leg.wait
leg[2]
51 1800



steps array waits: start end both none

targets array read-write, get returns a shallow copy
count int increment count (vs time)
bezier array or EBezier



# of steps / time
x
0.48



while (b)



2100



0 0.000 0.333 0.000 0.250

isEasy bool read-only, always true, better than instanceof Easy
legs array [{}] .map(v => Object.assign(v)) in constructor()
increment number



ease = linear or easy
1 - x
0.52



if (now < leg.wait)
leg[2] 2100 0 2100



1 0.333 0.667 0.500 0.500

methods
targets array [Easer] new Set()
steps array or int > 0



timing = linear or easy
in
0.48



e.status = E.pausing
leg[2] 4149 2049 2100



2 0.667 1.000 1.000 0.750

recycle() undefined

pre function runs pre-animation
waits array [int] steps-only, pre-#stepsToLegs timing


use leg.wait in between steps
out
0.48



e.value = leg.prev.end

4151 2051 2100









flip() undefined flips this.unit direction
peri function runs every frame
ends array, Easy, undef ditto, pre-#stepsToLegs end values


steps blurs .wait and .time
in
53.81



return e


51 4100









trip() undefined flips round-trip direction, outbound vs inbound
post function runs post-animation
easy Easy, undef for easing .steps




out
53.81



}







#plugOne()





newTarget() Easer* creates a new Easer and adds it to #targets
alt user property names


timing array, Easy, undef user-defined timing per step

distance is always positive:

543





e.value = calc(now / leg.time)








o.numBeg nb



addTarget() undefined adds an Easer to #targets
downward .down

jump int enum E.none - E.both, defaults to E.end


if (end < start) .down = true
x

0.84


e.status = E.going || E.coming








o.numEnd ne



cutTarget() bool was an item deleted?
plays .repeats + 1







.down uses 1 - N
1 - x

0.16


must set or check status every time…


0 1 2 4

izero pzero



"Protected"
loopByElm .loopByElement


16.2160000238



end &| start can be negative
in

0.84






in out _in _out

l o.cv



_easeMe() this.e.status called by Easies.prototype._easeEm()





364.1000000238





out

0.84


test steps html:
in: 0 0 0 0 0


o.seps



_loopByElm() bool validates elmCount and sets #plays





347.884


steps properties

in

67.10


# of steps
out: 1 0 1 0 0







_resume() undefined prepares to resume post-pause










.steps
out

67.10


jump
inIn: 2 0 0 2 0







_zero() undefined sychronizes #zero to now





o.time o.count


.jump
897





(direction?)
outIn: 3 0 1 2 0







Private
class Easy

no no


.timing
x


0.74

array of step values
inOut: 4 0 0 0 4
steps: ease values




instance properties
Private
every leg must have increment and time or two out of three






1 - x


0.26



outOut: 5 0 1 0 4


user or auto-generated values



#time int ms getter and setter, required field
instance methods

yes no

hardcoded steps

in


0.74

timing as Easy














#count int required for E.increment w/o time
#ease()
called as #run() from _easeMe()

no yes


user passes in array
out


0.74

timing as array of times (ascending) x drawAsSteps






ease time




#plays int setter, defaults to 1, must be > 0
#increment()
ditto
spread to leg[tc]




.steps and .timing
in


78.26


x start value












#_plays int backup for #plays, which changes
#nextLeg()
helps #ease() and #increment time-based
every non-spread leg must have i and t or 2 of 3




.steps[0] defines .start
out


78.26


x end value












#targets Set(Easer*) getter and setter, empty ok, never undefined
#incrementLeg()
helps #increment

yes yes


.steps.at(-1) defines .end








x mid value





steps w/o jump end: roundTrip





#maxElms int max elements across targets, for calculating #plays
#powIn


one of them wins, and early




.timing defines .jump


1 0 1 0

x wait





autoTrip: tripWait += #lastLeg.wait




#wait int ms initial wait time before animating anything
#powOut








.timing is start times


5 5 6 4

x mid





else: tripWait irrelevant




#pause int ms pause time between loop iterations
#bezier








not durations like .time
200.000 5 end start none both

x gap












#pauseRT int ms the pause between E.outbound and E.inbound
#validateTime()
helps constructor and time setter






iterable, not just array?

0 200 0 166.6666666667 0

x roundTrip












#zero int ms runtime essential, "protected" setter _zero()
#allocateLegTime()
helps time setter









1 400 200 333.3333333333 250

x autoTrip





set:E.set real 0 masked args and no cv, user or DOM.



#now int ms for resuming post-pause
#prepLegs()
constructor first iteration over legs

set plays() if (!_playsByElm())

process steps early


2 600 400 500 500

x pauseRT





enableRestore
get DOM values?



#run function either ease() or incrementBy*()
#finishLegs()
ditto second iteration

set loopByElm() ditto


if timing[], !!relative times!!

3 800 600 666.6666666667 750

x autoReset





hasElms pseudo




#pre callback getter and setter
#finishInc()
ditto for E.increment

newTarget() o.loopByElm = _playsByElm(o.l)


just like any leg

4 1000 800 833.3333333333 1000

x plays <select> 1-9





hasProp





#peri callback ditto
#legTime()



addTarget() _playsByElm(t.elmCount)


leg.time = timing.at(-1)


TRUE TRUE TRUE TRUE

x pause












#post callback ditto
#legUnit()



cutTarget() _playsByElm()


so jump is only end or both























#loop callback ditto, called when playback loops, #plays - 1 times
#reverseMe()








else portional times only

end dist tDist part unit
















#start float defaults to 0
static methods

constructor()



calc times in leg process
start 12 0 0 0 0
















#end float defaults to 1
#instanceOfE()



set target() #loopByElm === undefined


each step becomes a leg

19 7 7 0.2916666667 0.2916666667
















#dist float distance: Math.abs(this.#end - this.#start)
#linear()



set loopByElm() #_plays = ?





27 8 15 0.3333333333 0.625
















#base float #down ? #end : #start;
#sineIn()











31 4 19 0.1666666667 0.7916666667
















#unit float end value for e.unit, the unit interval [0-1]
#sineOut()










end 36 5 24 0.2083333333 1
















#down bool getter = .downward, true = 1 - e.unit
#circIn()










dist 24




















#isInc bool true = type:E.increment
#circOut()











21.5 2.5 0.3125 0.1041666667 0.3958333333
















#inbound bool getter = .inbound, true = round-tripping
#expoIn()











TRUE


0.3958333333
















#reversed bool has reverseMe() been run?
#expoOut()











end dist tDist part unit
















#revert bool getter and setter
#backIn()










start 36 0 0 0 1
















#roundTrip bool getter and setter
#backOut()



Easy






31 5 5 0.2083333333 0.7916666667
















#loopByElm bool set once, getter/setter as enhancement?
#elasticIn()



status == E.arrived, initially






27 4 9 0.1666666667 0.625
















#leg leg object the current leg in this animation
#elasticOut()











19 8 17 0.3333333333 0.2916666667
















#firstLeg leg object the first leg in the linked list
#bounceIn()










end 12 7 24 0.2916666667 0
















#lastLeg leg object ditto for reverting and round-tripping
#type()










dist 24




















#cNoTime int count # of user legs that don't define time
#steps()











21.5 5.5 0.6875 0.2291666667 0.3958333333
















#legsTime int ms total time of legs that define time
#legType()











TRUE

0.3958333333 TRUE
















static properties
#io()

































#eases 2D array [io[ease function]] for setting leg.ease
#legEase()

































#typeNames object E.type:"type" for #type() and #legType()
#reverseLeg()

































#greaterThan0 array preset argument values for #number()
#legText()

































#unDefGrThan0 array ditto plus one more
#number()

































#twoPi3 float (2 * Math.PI) / 3; for #elastic*()
#isNumberArray()



































#stepsToLegs()





































#easeSteps()





































#stepsPrevEnd()








































































Sheet 14: Easies


class Easies

What should the syntax for multiFunc measers be?





name type description


at the top level like everything else?




Public



that is simpler for the basic code, but harder to tell if each mf has 1 easy



getters and setters



requires waiting until o.mask is set, late in the process



size int this.#easies.size



users must figure out the arg indexes across funcs - oh the horror!



isEasies bool read-only, always true, better than ("x" in obj)


or within each multiFunc object?




Set emulation



that aligns with the mask property, which is good



has() bool this.#easies.has()



requires validation that every mf has easies



add() undefined this.#easies.add()



a bit odd for 1-arg functions: do I require a one-element array?



delete() bool this.#easies.delete() plus



no, you can use the .easy property here and here alone



clear() undefined clears #easies, #backup, #targets, #easy2Targets








[Symbol.iterator]() iterator this.#easies.values()

#easies





instance methods

#active





recycle() undefined runs every easy.recycle()








newTarget() Measer* creates new Measer*, adds it to #targets, easy2Targets

For each easy:





addTarget() Measer* adds existing Measer* to #targets, easy2Targets


targets' play count




cutTarget() bool did the target exist? was it deleted?


Map(Easy, Map(target, plays))




clearTargets() undefined clears #targets and the Sets in #easy2Targets.values()


when !plays, delete target from map




static methods


when !map.size delete easy from map




createFromTargets() Easies creates an Easies instance from [Measer*]


when outer !map.size you have arrived




last() static gets last Easy playing








"Protected"

For each measer:





methods


active easies




_easeEm() bool: E.arrived=false called every frame by AFrame.animate()


Map(Measer, Set(Easy))




_end() undefined cleans up after animation ends, AFrame.stop()








_resume() undefined resumes after animation paused, AFrame.play()






255

_zero number: now write-only, initializes easies for fresh playback



checked undefined
0.85

Private



checked unchecked
216.75

properties



checked checked


#easies Set(Easy) the easies



unchecked undefined


#backup Set(Easy) backup of #easies



unchecked unchecked


#targets Set(Measer) the multi-ease targets, instances of Measer*



unchecked checked


#easy2Targets Map(Easy, Set(Measer*)) collects the targets by Easy








methods








#setTarget()
helps newTarget() and addTarget()








#instanceOfM() bool validator callback for Ez.toArray(), M = Measer*






























Sheet 15: AFrame


class AFrame

name type description

Public

property

keepPost bool default = false = one-shot post()

getters and setters

targets Set(Easies &| ACues) read-write

peri callback read-write, runs once per #animate()

post callback read-write, runs on arrival

onArrival status value read-write, the state to set on arrival

oneShot bool read-write, true sets onArrival = E.empty

status bool read-only, this.#status

atOrigin bool read-only, this.#status == E.original

atStart bool read-only, this.#status == E.initial

atEnd bool read-only, this.#status == E.arrived

isPaused bool read-only, this.#status == E.paused

isRunning bool read-only, this.#status == E.running

isEmpty bool read-only, this.#status == E.empty

fps bool read-only, test() results

gpu bool ditto

methods

play()



pause()



stop()



test()



Private

properties

#targets Set(Easies &| ACues) the animation targets

#backup Set(Easies &| ACues) backup of #targets, which depletes

#promise Promise with resolve() and reject() properties

#status int enum E.arrived, E.initial - E.empty

#onArrival status value excludes E.runnning and E.paused

#paused bool am I paused now?

#frame; int for cancelAnimationFrame()

#peri callback getter and setter

#post callback ditto

#cFrames; int frame count for .test()

#fps number calculated frames per second

#fpsMin; number user minimum value for pass/fail

#gpu bool pass/fail result

#gpuPost; callback runs after .test() completes

#skip; int # of frames to skip at top of test

methods

#animate()



#runPost()



#endEasies()



#endCues()



#skipFrames()



#frames()



#fps_gpu()











Sheet 16: ACues


class ACues

name type description

Public

getters and setters

cues array: [{}] read-write

pre callback read-write

peri callback read-write, defaults to default()

post callback read-write

callback wrapper alias for .peri

elms array: [Element] elements for default()

prop Prop the property to set in default()

validate bool validate user cues or not, default = true

isACues bool read-only, always returns true

methods

default()
the default callback/peri function

newCue()



addCue()



splice()



push()



unshift()



insert()



"Protected"

methods

_next()



_resume()



_zero()



_reset()



_runPost()



Private

properties

#cues array: [cue]


#i integer current index into #cues

#last integer last cue index (#cues.length - 1)

#now number


#zero number


#elms array: [Element]


#prop Prop


#pre callback ditto

#peri callback getter and setter

#post callback ditto

#validate callback for Ez.toArray(), can be undefined

methods

#validCue()



#insertCue()



#addNew()











Sheet 17: presets

Presets
properties type io
1030 0.97353

































Easy- MEaser-
time* linear in
28 0.02647






















833









default default
type sine out
1058 0.027184466











@default rem = 16px:









612
0.00001
0.00000
0.00000
-0.00002
-0.00002
sineIn bezierABC
io circ inOut
1030 1030












for now 720p minimum within bounds, no steps or elastic








0.7346938776
-0.00001
0.00000
0.00000
0.00002
0.00002
sineOut multiSteps
mid expo OutIn















easings test page is relatively very square









650.4375 0.97355 625.484375 0.97354 610.0625 0.97354 548 0.97355 492 0.97356
circInOut multiStepsEz
split back InIn















E.elastic == max out of bounds









17.671875 0.02645 17 0.02646 16.578125 0.02646 14.890625 0.02645 13.359375 0.02644
circOutIn

gap elastic OutOut















not ok for >90% of phones, requires vertical design, no sidebar









668.109375 1.00000 642.484375 1.00000 626.640625 1.00000 562.890625 1.00000 505.359375 1.00000
elasticInIn

roundTrip bounce


html chart minimum viewport sizes
ok for some tablets, >90% laptops, especially more recent ones



















bounceOutOut

autoTrip pow


font-size min-width linear steps elastic










630









pow_0.5

flipTrip bezier 18 15 13 100.00% 16px 608 diff 855 x 716 855 x 747 855 x 941
min: 855 x 716 0.837




6









pow_2.5

tripWait steps 16.875 14.0625 12.1875 93.75% 15px 574 34 806.313 x 681.813 806.313 x 710.813 806.313 x 895.625
max: 855 x 941 1.101




10









pow_2.5o/5i

plays increment 15.75 13.125 11.375 87.50% 14px 548 26 759.375 x 642.25 759.375 x 669.25 759.375 x 841.25
VGA 640 x 480 0.750




209









sine + pow

loopWait
14.625 12.1875 10.5625 81.25% 13px 522 26 719.563 x 607.437 719.563 x 632.437 719.563 x 798.875
HD 1920 x 1080 0.563




17









bezierA



13.5 11.25 9.75 75.00% 12px 492 30 674.75 x 573.5 674.75 x 596.5 674.75 x 749.25










242









bezierB



16.61538 13.84615 12 68.75% 11px 466 26



















872









bezierC





0.9230769231 62.50% 10px 440 26 0.0643274854

43.4049707602

631.3450292398























bezierD

595






































steps_15

578.366 579.0996970777 579.2812



calc(13px / (13px - round(down, (16px - 1rem) / 3, 1px)))































steps_easeT

16.634 15.9003029223 15.7188







25 65
96
























steps_easeV







0 0 13 13
65 31
31
























steps_easeTV



1904


1 0.3333333333 12.6666666667 13
6 1
2
























steps_outIn
15px

333


2 0.6666666667 12.3333333333 13
3



























steps_oIline
width: 794.688 800.313 5.7177177177


3 1 12 12
56 56
87
























steps_oIbezB
height: 879.188 884.813 elastic




































mid

741 746.625 steps







<input type="number>



























split

710 715.625 linear







isSpinning = mousedown || (keydown && ("ArrowDown" || "ArrowUp"))



























gap

2.8125 5.625 borderW * 2

1030




format oninput if (isSpinning)



























msg350

6.5625



1403




always format onchange (any other way?)



























autoTrip

9.375 padLeft


0.7341411262

































manualTrip

186.406



886




991 window.innerHeight

window.innerHeight























tripNoFlip

195.781 lefties[1].offsetWidth


650.4490377762




10 topBottom

topBottom























tripWait

15.594 range.svg.clientWidth








6 offShadow * 2

offShadow * 2























flow_down












65 elms.diptych.offsetHeight

elms.diptych.offsetHeight























plays_3

226.375









25 elms.x.offsetHeight

elms.x.offsetHeight























loopWait









































loopByElm










































Sheet 18: hsl_hwb


JavaScript CSS rgb hsl hwb hsl hwb R G B hue s l w b r g b min max diff sum
aliceblue rgb:[240,248,255], hsl:[208.0,100.0, 97.1], hwb:[208.0, 94.1, 0.0] rgb(240 248 255) hsl(208 100% 97.1%) hwb(208 94.1% 0%) 240 248 255 208.0 100.0 97.1 208.0 94.1 0.0 208 100 97.1 208 94.1 0 240 248 255 208 100 97 94 0 0.94 0.97 1.00 0.94 1.00 0.06 1.94 94.1%
antiquewhite rgb:[250,235,215], hsl:[ 34.3, 77.8, 91.2], hwb:[ 34.3, 84.3, 2.0] rgb(250 235 215) hsl(34.3 77.8% 91.2%) hwb(34.3 84.3% 2%) 250 235 215 34.3 77.8 91.2 34.3 84.3 2.0 34.3 77.8 91.2 34.3 84.3 2 250 235 215 34 78 91 84 2 0.98 0.92 0.84 0.84 0.98 0.14 1.82
aqua rgb:[ 0,255,255], hsl:[180.0,100.0, 50.0], hwb:[180.0, 0.0, 0.0] rgb(0 255 255) hsl(180 100% 50%) hwb(180 0% 0%) 0 255 255 180.0 100.0 50.0 180.0 0.0 0.0 180 100 50 180 0 0 0 255 255 180 100 50 0 0 0.00 1.00 1.00 0.00 1.00 1.00 1.00
aquamarine rgb:[127,255,212], hsl:[159.8,100.0, 74.9], hwb:[159.8, 49.8, 0.0] rgb(127 255 212) hsl(159.8 100% 74.9%) hwb(159.8 49.8% 0%) 127 255 212 159.8 100.0 74.9 159.8 49.8 0.0 159.8 100 74.9 159.8 49.8 0 127 255 212 160 100 75 50 0 0.50 1.00 0.83 0.50 1.00 0.50 1.50 75.0000000
azure rgb:[240,255,255], hsl:[180.0,100.0, 97.1], hwb:[180.0, 94.1, 0.0] rgb(240 255 255) hsl(180 100% 97.1%) hwb(180 94.1% 0%) 240 255 255 180.0 100.0 97.1 180.0 94.1 0.0 180 100 97.1 180 94.1 0 240 255 255 180 100 97 94 0 0.94 1.00 1.00 0.94 1.00 0.06 1.94 1
beige rgb:[245,245,220], hsl:[ 60.0, 55.6, 91.2], hwb:[ 60.0, 86.3, 3.9] rgb(245 245 220) hsl(60 55.6% 91.2%) hwb(60 86.3% 3.9%) 245 245 220 60.0 55.6 91.2 60.0 86.3 3.9 60 55.6 91.2 60 86.3 3.9 245 245 220 60 56 91 86 4 0.96 0.96 0.86 0.86 0.96 0.10 1.82
bisque rgb:[255,228,196], hsl:[ 32.5,100.0, 88.4], hwb:[ 32.5, 76.9, 0.0] rgb(255 228 196) hsl(32.5 100% 88.4%) hwb(32.5 76.9% 0%) 255 228 196 32.5 100.0 88.4 32.5 76.9 0.0 32.5 100 88.4 32.5 76.9 0 255 228 196 33 100 88 77 0 1.00 0.89 0.77 0.77 1.00 0.23 1.77
black rgb:[ 0, 0, 0], hsl:[ 0.0, 0.0, 0.0], hwb:[ 0.0, 0.0,100.0] rgb(0 0 0) hsl(0 0% 0%) hwb(0 0% 100%) 0 0 0 0.0 0.0 0.0 0.0 0.0 100.0 0 0 0 0 0 100 0 0 0 0 0 0 0 100 0.00 0.00 0.00 0.00 0.00 0.00 0.00
blanchedalmond rgb:[255,235,205], hsl:[ 36.0,100.0, 90.2], hwb:[ 36.0, 80.4, 0.0] rgb(255 235 205) hsl(36 100% 90.2%) hwb(36 80.4% 0%) 255 235 205 36.0 100.0 90.2 36.0 80.4 0.0 36 100 90.2 36 80.4 0 255 235 205 36 100 90 80 0 1.00 0.92 0.80 0.80 1.00 0.20 1.80
blue rgb:[ 0, 0,255], hsl:[240.0,100.0, 50.0], hwb:[240.0, 0.0, 0.0] rgb(0 0 255) hsl(240 100% 50%) hwb(240 0% 0%) 0 0 255 240.0 100.0 50.0 240.0 0.0 0.0 240 100 50 240 0 0 0 0 255 240 100 50 0 0 0.00 0.00 1.00 0.00 1.00 1.00 1.00
blueviolet rgb:[138, 43,226], hsl:[271.1, 75.9, 52.7], hwb:[271.1, 16.9, 11.4] rgb(138 43 226) hsl(271.1 75.9% 52.7%) hwb(271.1 16.9% 11.4%) 138 43 226 271.1 75.9 52.7 271.1 16.9 11.4 271.1 75.9 52.7 271.1 16.9 11.4 138 43 226 271 76 53 17 11 0.54 0.17 0.89 0.17 0.89 0.72 1.05
brown rgb:[165, 42, 42], hsl:[ 0.0, 59.4, 40.6], hwb:[ 0.0, 16.5, 35.3] rgb(165 42 42) hsl(0 59.4% 40.6%) hwb(0 16.5% 35.3%) 165 42 42 0.0 59.4 40.6 0.0 16.5 35.3 0 59.4 40.6 0 16.5 35.3 165 42 42 0 59 41 16 35 0.65 0.16 0.16 0.16 0.65 0.48 0.81
burlywood rgb:[222,184,135], hsl:[ 33.8, 56.9, 70.0], hwb:[ 33.8, 52.9, 12.9] rgb(222 184 135) hsl(33.8 56.9% 70%) hwb(33.8 52.9% 12.9%) 222 184 135 33.8 56.9 70.0 33.8 52.9 12.9 33.8 56.9 70 33.8 52.9 12.9 222 184 135 34 57 70 53 13 0.87 0.72 0.53 0.53 0.87 0.34 1.40
cadetblue rgb:[ 95,158,160], hsl:[181.8, 25.5, 50.0], hwb:[181.8, 37.3, 37.3] rgb(95 158 160) hsl(181.8 25.5% 50%) hwb(181.8 37.3% 37.3%) 95 158 160 181.8 25.5 50.0 181.8 37.3 37.3 181.8 25.5 50 181.8 37.3 37.3 95 158 160 182 25 50 37 37 0.37 0.62 0.63 0.37 0.63 0.25 1.00
chartreuse rgb:[127,255, 0], hsl:[ 90.1,100.0, 50.0], hwb:[ 90.1, 0.0, 0.0] rgb(127 255 0) hsl(90.1 100% 50%) hwb(90.1 0% 0%) 127 255 0 90.1 100.0 50.0 90.1 0.0 0.0 90.1 100 50 90.1 0 0 127 255 0 90 100 50 0 0 0.50 1.00 0.00 0.00 1.00 1.00 1.00
chocolate rgb:[210,105, 30], hsl:[ 25.0, 75.0, 47.1], hwb:[ 25.0, 11.8, 17.6] rgb(210 105 30) hsl(25 75% 47.1%) hwb(25 11.8% 17.6%) 210 105 30 25.0 75.0 47.1 25.0 11.8 17.6 25 75 47.1 25 11.8 17.6 210 105 30 25 75 47 12 18 0.82 0.41 0.12 0.12 0.82 0.71 0.94
coral rgb:[255,127, 80], hsl:[ 16.1,100.0, 65.7], hwb:[ 16.1, 31.4, 0.0] rgb(255 127 80) hsl(16.1 100% 65.7%) hwb(16.1 31.4% 0%) 255 127 80 16.1 100.0 65.7 16.1 31.4 0.0 16.1 100 65.7 16.1 31.4 0 255 127 80 16 100 66 31 0 1.00 0.50 0.31 0.31 1.00 0.69 1.31
cornflowerblue rgb:[100,149,237], hsl:[218.5, 79.2, 66.1], hwb:[218.5, 39.2, 7.1] rgb(100 149 237) hsl(218.5 79.2% 66.1%) hwb(218.5 39.2% 7.1%) 100 149 237 218.5 79.2 66.1 218.5 39.2 7.1 218.5 79.2 66.1 218.5 39.2 7.1 100 149 237 219 79 66 39 7 0.39 0.58 0.93 0.39 0.93 0.54 1.32
cornsilk rgb:[255,248,220], hsl:[ 48.0,100.0, 93.1], hwb:[ 48.0, 86.3, 0.0] rgb(255 248 220) hsl(48 100% 93.1%) hwb(48 86.3% 0%) 255 248 220 48.0 100.0 93.1 48.0 86.3 0.0 48 100 93.1 48 86.3 0 255 248 220 48 100 93 86 0 1.00 0.97 0.86 0.86 1.00 0.14 1.86
crimson rgb:[220, 20, 60], hsl:[348.0, 83.3, 47.1], hwb:[348.0, 7.8, 13.7] rgb(220 20 60) hsl(348 83.3% 47.1%) hwb(348 7.8% 13.7%) 220 20 60 348.0 83.3 47.1 348.0 7.8 13.7 348 83.3 47.1 348 7.8 13.7 220 20 60 348 83 47 8 14 0.86 0.08 0.24 0.08 0.86 0.78 0.94
cyan rgb:[ 0,255,255], hsl:[180.0,100.0, 50.0], hwb:[180.0, 0.0, 0.0] rgb(0 255 255) hsl(180 100% 50%) hwb(180 0% 0%) 0 255 255 180.0 100.0 50.0 180.0 0.0 0.0 180 100 50 180 0 0 0 255 255 180 100 50 0 0 0.00 1.00 1.00 0.00 1.00 1.00 1.00
darkblue rgb:[ 0, 0,139], hsl:[240.0,100.0, 27.3], hwb:[240.0, 0.0, 45.5] rgb(0 0 139) hsl(240 100% 27.3%) hwb(240 0% 45.5%) 0 0 139 240.0 100.0 27.3 240.0 0.0 45.5 240 100 27.3 240 0 45.5 0 0 139 240 100 27 0 45 0.00 0.00 0.55 0.00 0.55 0.55 0.55
darkcyan rgb:[ 0,139,139], hsl:[180.0,100.0, 27.3], hwb:[180.0, 0.0, 45.5] rgb(0 139 139) hsl(180 100% 27.3%) hwb(180 0% 45.5%) 0 139 139 180.0 100.0 27.3 180.0 0.0 45.5 180 100 27.3 180 0 45.5 0 139 139 180 100 27 0 45 0.00 0.55 0.55 0.00 0.55 0.55 0.55
darkgoldenrod rgb:[184,134, 11], hsl:[ 42.7, 88.7, 38.2], hwb:[ 42.7, 4.3, 27.8] rgb(184 134 11) hsl(42.7 88.7% 38.2%) hwb(42.7 4.3% 27.8%) 184 134 11 42.7 88.7 38.2 42.7 4.3 27.8 42.7 88.7 38.2 42.7 4.3 27.8 184 134 11 43 89 38 4 28 0.72 0.53 0.04 0.04 0.72 0.68 0.76
darkgray rgb:[169,169,169], hsl:[ 0.0, 0.0, 66.3], hwb:[ 0.0, 66.3, 33.7] rgb(169 169 169) hsl(0 0% 66.3%) hwb(0 66.3% 33.7%) 169 169 169 0.0 0.0 66.3 0.0 66.3 33.7 0 0 66.3 0 66.3 33.7 169 169 169 0 0 66 66 34 0.66 0.66 0.66 0.66 0.66 0.00 1.33
darkgreen rgb:[ 0,100, 0], hsl:[120.0,100.0, 19.6], hwb:[120.0, 0.0, 60.8] rgb(0 100 0) hsl(120 100% 19.6%) hwb(120 0% 60.8%) 0 100 0 120.0 100.0 19.6 120.0 0.0 60.8 120 100 19.6 120 0 60.8 0 100 0 120 100 20 0 61 0.00 0.39 0.00 0.00 0.39 0.39 0.39
darkgrey rgb:[169,169,169], hsl:[ 0.0, 0.0, 66.3], hwb:[ 0.0, 66.3, 33.7] rgb(169 169 169) hsl(0 0% 66.3%) hwb(0 66.3% 33.7%) 169 169 169 0.0 0.0 66.3 0.0 66.3 33.7 0 0 66.3 0 66.3 33.7 169 169 169 0 0 66 66 34 0.66 0.66 0.66 0.66 0.66 0.00 1.33
darkkhaki rgb:[189,183,107], hsl:[ 55.6, 38.3, 58.0], hwb:[ 55.6, 42.0, 25.9] rgb(189 183 107) hsl(55.6 38.3% 58%) hwb(55.6 42% 25.9%) 189 183 107 55.6 38.3 58.0 55.6 42.0 25.9 55.6 38.3 58 55.6 42 25.9 189 183 107 56 38 58 42 26 0.74 0.72 0.42 0.42 0.74 0.32 1.16
darkmagenta rgb:[139, 0,139], hsl:[300.0,100.0, 27.3], hwb:[300.0, 0.0, 45.5] rgb(139 0 139) hsl(300 100% 27.3%) hwb(300 0% 45.5%) 139 0 139 300.0 100.0 27.3 300.0 0.0 45.5 300 100 27.3 300 0 45.5 139 0 139 300 100 27 0 45 0.55 0.00 0.55 0.00 0.55 0.55 0.55
darkolivegreen rgb:[ 85,107, 47], hsl:[ 82.0, 39.0, 30.2], hwb:[ 82.0, 18.4, 58.0] rgb(85 107 47) hsl(82 39% 30.2%) hwb(82 18.4% 58%) 85 107 47 82.0 39.0 30.2 82.0 18.4 58.0 82 39 30.2 82 18.4 58 85 107 47 82 39 30 18 58 0.33 0.42 0.18 0.18 0.42 0.24 0.60
darkorange rgb:[255,140, 0], hsl:[ 32.9,100.0, 50.0], hwb:[ 32.9, 0.0, 0.0] rgb(255 140 0) hsl(32.9 100% 50%) hwb(32.9 0% 0%) 255 140 0 32.9 100.0 50.0 32.9 0.0 0.0 32.9 100 50 32.9 0 0 255 140 0 33 100 50 0 0 1.00 0.55 0.00 0.00 1.00 1.00 1.00
darkorchid rgb:[153, 50,204], hsl:[280.1, 60.6, 49.8], hwb:[280.1, 19.6, 20.0] rgb(153 50 204) hsl(280.1 60.6% 49.8%) hwb(280.1 19.6% 20%) 153 50 204 280.1 60.6 49.8 280.1 19.6 20.0 280.1 60.6 49.8 280.1 19.6 20 153 50 204 280 61 50 20 20 0.60 0.20 0.80 0.20 0.80 0.60 1.00
darkred rgb:[139, 0, 0], hsl:[ 0.0,100.0, 27.3], hwb:[ 0.0, 0.0, 45.5] rgb(139 0 0) hsl(0 100% 27.3%) hwb(0 0% 45.5%) 139 0 0 0.0 100.0 27.3 0.0 0.0 45.5 0 100 27.3 0 0 45.5 139 0 0 0 100 27 0 45 0.55 0.00 0.00 0.00 0.55 0.55 0.55
darksalmon rgb:[233,150,122], hsl:[ 15.1, 71.6, 69.6], hwb:[ 15.1, 47.8, 8.6] rgb(233 150 122) hsl(15.1 71.6% 69.6%) hwb(15.1 47.8% 8.6%) 233 150 122 15.1 71.6 69.6 15.1 47.8 8.6 15.1 71.6 69.6 15.1 47.8 8.6 233 150 122 15 72 70 48 9 0.91 0.59 0.48 0.48 0.91 0.44 1.39
darkseagreen rgb:[143,188,143], hsl:[120.0, 25.1, 64.9], hwb:[120.0, 56.1, 26.3] rgb(143 188 143) hsl(120 25.1% 64.9%) hwb(120 56.1% 26.3%) 143 188 143 120.0 25.1 64.9 120.0 56.1 26.3 120 25.1 64.9 120 56.1 26.3 143 188 143 120 25 65 56 26 0.56 0.74 0.56 0.56 0.74 0.18 1.30
darkslateblue rgb:[ 72, 61,139], hsl:[248.5, 39.0, 39.2], hwb:[248.5, 23.9, 45.5] rgb(72 61 139) hsl(248.5 39% 39.2%) hwb(248.5 23.9% 45.5%) 72 61 139 248.5 39.0 39.2 248.5 23.9 45.5 248.5 39 39.2 248.5 23.9 45.5 72 61 139 248 39 39 24 45 0.28 0.24 0.55 0.24 0.55 0.31 0.78
darkslategray rgb:[ 47, 79, 79], hsl:[180.0, 25.4, 24.7], hwb:[180.0, 18.4, 69.0] rgb(47 79 79) hsl(180 25.4% 24.7%) hwb(180 18.4% 69%) 47 79 79 180.0 25.4 24.7 180.0 18.4 69.0 180 25.4 24.7 180 18.4 69 47 79 79 180 25 25 18 69 0.18 0.31 0.31 0.18 0.31 0.13 0.49
darkslategrey rgb:[ 47, 79, 79], hsl:[180.0, 25.4, 24.7], hwb:[180.0, 18.4, 69.0] rgb(47 79 79) hsl(180 25.4% 24.7%) hwb(180 18.4% 69%) 47 79 79 180.0 25.4 24.7 180.0 18.4 69.0 180 25.4 24.7 180 18.4 69 47 79 79 180 25 25 18 69 0.18 0.31 0.31 0.18 0.31 0.13 0.49
darkturquoise rgb:[ 0,206,209], hsl:[180.9,100.0, 41.0], hwb:[180.9, 0.0, 18.0] rgb(0 206 209) hsl(180.9 100% 41%) hwb(180.9 0% 18%) 0 206 209 180.9 100.0 41.0 180.9 0.0 18.0 180.9 100 41 180.9 0 18 0 206 209 181 100 41 0 18 0.00 0.81 0.82 0.00 0.82 0.82 0.82
darkviolet rgb:[148, 0,211], hsl:[282.1,100.0, 41.4], hwb:[282.1, 0.0, 17.3] rgb(148 0 211) hsl(282.1 100% 41.4%) hwb(282.1 0% 17.3%) 148 0 211 282.1 100.0 41.4 282.1 0.0 17.3 282.1 100 41.4 282.1 0 17.3 148 0 211 282 100 41 0 17 0.58 0.00 0.83 0.00 0.83 0.83 0.83
deeppink rgb:[255, 20,147], hsl:[327.6,100.0, 53.9], hwb:[327.6, 7.8, 0.0] rgb(255 20 147) hsl(327.6 100% 53.9%) hwb(327.6 7.8% 0%) 255 20 147 327.6 100.0 53.9 327.6 7.8 0.0 327.6 100 53.9 327.6 7.8 0 255 20 147 328 100 54 8 0 1.00 0.08 0.58 0.08 1.00 0.92 1.08
deepskyblue rgb:[ 0,191,255], hsl:[195.1,100.0, 50.0], hwb:[195.1, 0.0, 0.0] rgb(0 191 255) hsl(195.1 100% 50%) hwb(195.1 0% 0%) 0 191 255 195.1 100.0 50.0 195.1 0.0 0.0 195.1 100 50 195.1 0 0 0 191 255 195 100 50 0 0 0.00 0.75 1.00 0.00 1.00 1.00 1.00
dimgray rgb:[105,105,105], hsl:[ 0.0, 0.0, 41.2], hwb:[ 0.0, 41.2, 58.8] rgb(105 105 105) hsl(0 0% 41.2%) hwb(0 41.2% 58.8%) 105 105 105 0.0 0.0 41.2 0.0 41.2 58.8 0 0 41.2 0 41.2 58.8 105 105 105 0 0 41 41 59 0.41 0.41 0.41 0.41 0.41 0.00 0.82
dimgrey rgb:[105,105,105], hsl:[ 0.0, 0.0, 41.2], hwb:[ 0.0, 41.2, 58.8] rgb(105 105 105) hsl(0 0% 41.2%) hwb(0 41.2% 58.8%) 105 105 105 0.0 0.0 41.2 0.0 41.2 58.8 0 0 41.2 0 41.2 58.8 105 105 105 0 0 41 41 59 0.41 0.41 0.41 0.41 0.41 0.00 0.82
dodgerblue rgb:[ 30,144,255], hsl:[209.6,100.0, 55.9], hwb:[209.6, 11.8, 0.0] rgb(30 144 255) hsl(209.6 100% 55.9%) hwb(209.6 11.8% 0%) 30 144 255 209.6 100.0 55.9 209.6 11.8 0.0 209.6 100 55.9 209.6 11.8 0 30 144 255 210 100 56 12 0 0.12 0.56 1.00 0.12 1.00 0.88 1.12
firebrick rgb:[178, 34, 34], hsl:[ 0.0, 67.9, 41.6], hwb:[ 0.0, 13.3, 30.2] rgb(178 34 34) hsl(0 67.9% 41.6%) hwb(0 13.3% 30.2%) 178 34 34 0.0 67.9 41.6 0.0 13.3 30.2 0 67.9 41.6 0 13.3 30.2 178 34 34 0 68 42 13 30 0.70 0.13 0.13 0.13 0.70 0.56 0.83
floralwhite rgb:[255,250,240], hsl:[ 40.0,100.0, 97.1], hwb:[ 40.0, 94.1, 0.0] rgb(255 250 240) hsl(40 100% 97.1%) hwb(40 94.1% 0%) 255 250 240 40.0 100.0 97.1 40.0 94.1 0.0 40 100 97.1 40 94.1 0 255 250 240 40 100 97 94 0 1.00 0.98 0.94 0.94 1.00 0.06 1.94
forestgreen rgb:[ 34,139, 34], hsl:[120.0, 60.7, 33.9], hwb:[120.0, 13.3, 45.5] rgb(34 139 34) hsl(120 60.7% 33.9%) hwb(120 13.3% 45.5%) 34 139 34 120.0 60.7 33.9 120.0 13.3 45.5 120 60.7 33.9 120 13.3 45.5 34 139 34 120 61 34 13 45 0.13 0.55 0.13 0.13 0.55 0.41 0.68
fuchsia rgb:[255, 0,255], hsl:[300.0,100.0, 50.0], hwb:[300.0, 0.0, 0.0] rgb(255 0 255) hsl(300 100% 50%) hwb(300 0% 0%) 255 0 255 300.0 100.0 50.0 300.0 0.0 0.0 300 100 50 300 0 0 255 0 255 300 100 50 0 0 1.00 0.00 1.00 0.00 1.00 1.00 1.00
gainsboro rgb:[220,220,220], hsl:[ 0.0, 0.0, 86.3], hwb:[ 0.0, 86.3, 13.7] rgb(220 220 220) hsl(0 0% 86.3%) hwb(0 86.3% 13.7%) 220 220 220 0.0 0.0 86.3 0.0 86.3 13.7 0 0 86.3 0 86.3 13.7 220 220 220 0 0 86 86 14 0.86 0.86 0.86 0.86 0.86 0.00 1.73
ghostwhite rgb:[248,248,255], hsl:[240.0,100.0, 98.6], hwb:[240.0, 97.3, 0.0] rgb(248 248 255) hsl(240 100% 98.6%) hwb(240 97.3% 0%) 248 248 255 240.0 100.0 98.6 240.0 97.3 0.0 240 100 98.6 240 97.3 0 248 248 255 240 100 99 97 0 0.97 0.97 1.00 0.97 1.00 0.03 1.97
gold rgb:[255,215, 0], hsl:[ 50.6,100.0, 50.0], hwb:[ 50.6, 0.0, 0.0] rgb(255 215 0) hsl(50.6 100% 50%) hwb(50.6 0% 0%) 255 215 0 50.6 100.0 50.0 50.6 0.0 0.0 50.6 100 50 50.6 0 0 255 215 0 51 100 50 0 0 1.00 0.84 0.00 0.00 1.00 1.00 1.00
goldenrod rgb:[218,165, 32], hsl:[ 42.9, 74.4, 49.0], hwb:[ 42.9, 12.5, 14.5] rgb(218 165 32) hsl(42.9 74.4% 49%) hwb(42.9 12.5% 14.5%) 218 165 32 42.9 74.4 49.0 42.9 12.5 14.5 42.9 74.4 49 42.9 12.5 14.5 218 165 32 43 74 49 13 15 0.85 0.65 0.13 0.13 0.85 0.73 0.98
gray rgb:[128,128,128], hsl:[ 0.0, 0.0, 50.2], hwb:[ 0.0, 50.2, 49.8] rgb(128 128 128) hsl(0 0% 50.2%) hwb(0 50.2% 49.8%) 128 128 128 0.0 0.0 50.2 0.0 50.2 49.8 0 0 50.2 0 50.2 49.8 128 128 128 0 0 50 50 50 0.50 0.50 0.50 0.50 0.50 0.00 1.00
green rgb:[ 0,128, 0], hsl:[120.0,100.0, 25.1], hwb:[120.0, 0.0, 49.8] rgb(0 128 0) hsl(120 100% 25.1%) hwb(120 0% 49.8%) 0 128 0 120.0 100.0 25.1 120.0 0.0 49.8 120 100 25.1 120 0 49.8 0 128 0 120 100 25 0 50 0.00 0.50 0.00 0.00 0.50 0.50 0.50
greenyellow rgb:[173,255, 47], hsl:[ 83.7,100.0, 59.2], hwb:[ 83.7, 18.4, 0.0] rgb(173 255 47) hsl(83.7 100% 59.2%) hwb(83.7 18.4% 0%) 173 255 47 83.7 100.0 59.2 83.7 18.4 0.0 83.7 100 59.2 83.7 18.4 0 173 255 47 84 100 59 18 0 0.68 1.00 0.18 0.18 1.00 0.82 1.18
grey rgb:[128,128,128], hsl:[ 0.0, 0.0, 50.2], hwb:[ 0.0, 50.2, 49.8] rgb(128 128 128) hsl(0 0% 50.2%) hwb(0 50.2% 49.8%) 128 128 128 0.0 0.0 50.2 0.0 50.2 49.8 0 0 50.2 0 50.2 49.8 128 128 128 0 0 50 50 50 0.50 0.50 0.50 0.50 0.50 0.00 1.00
honeydew rgb:[240,255,240], hsl:[120.0,100.0, 97.1], hwb:[120.0, 94.1, 0.0] rgb(240 255 240) hsl(120 100% 97.1%) hwb(120 94.1% 0%) 240 255 240 120.0 100.0 97.1 120.0 94.1 0.0 120 100 97.1 120 94.1 0 240 255 240 120 100 97 94 0 0.94 1.00 0.94 0.94 1.00 0.06 1.94
hotpink rgb:[255,105,180], hsl:[330.0,100.0, 70.6], hwb:[330.0, 41.2, 0.0] rgb(255 105 180) hsl(330 100% 70.6%) hwb(330 41.2% 0%) 255 105 180 330.0 100.0 70.6 330.0 41.2 0.0 330 100 70.6 330 41.2 0 255 105 180 330 100 71 41 0 1.00 0.41 0.71 0.41 1.00 0.59 1.41
indianred rgb:[205, 92, 92], hsl:[ 0.0, 53.1, 58.2], hwb:[ 0.0, 36.1, 19.6] rgb(205 92 92) hsl(0 53.1% 58.2%) hwb(0 36.1% 19.6%) 205 92 92 0.0 53.1 58.2 0.0 36.1 19.6 0 53.1 58.2 0 36.1 19.6 205 92 92 0 53 58 36 20 0.80 0.36 0.36 0.36 0.80 0.44 1.16
indigo rgb:[ 75, 0,130], hsl:[274.6,100.0, 25.5], hwb:[274.6, 0.0, 49.0] rgb(75 0 130) hsl(274.6 100% 25.5%) hwb(274.6 0% 49%) 75 0 130 274.6 100.0 25.5 274.6 0.0 49.0 274.6 100 25.5 274.6 0 49 75 0 130 275 100 25 0 49 0.29 0.00 0.51 0.00 0.51 0.51 0.51
ivory rgb:[255,255,240], hsl:[ 60.0,100.0, 97.1], hwb:[ 60.0, 94.1, 0.0] rgb(255 255 240) hsl(60 100% 97.1%) hwb(60 94.1% 0%) 255 255 240 60.0 100.0 97.1 60.0 94.1 0.0 60 100 97.1 60 94.1 0 255 255 240 60 100 97 94 0 1.00 1.00 0.94 0.94 1.00 0.06 1.94
khaki rgb:[240,230,140], hsl:[ 54.0, 76.9, 74.5], hwb:[ 54.0, 54.9, 5.9] rgb(240 230 140) hsl(54 76.9% 74.5%) hwb(54 54.9% 5.9%) 240 230 140 54.0 76.9 74.5 54.0 54.9 5.9 54 76.9 74.5 54 54.9 5.9 240 230 140 54 77 75 55 6 0.94 0.90 0.55 0.55 0.94 0.39 1.49
lavender rgb:[230,230,250], hsl:[240.0, 66.7, 94.1], hwb:[240.0, 90.2, 2.0] rgb(230 230 250) hsl(240 66.7% 94.1%) hwb(240 90.2% 2%) 230 230 250 240.0 66.7 94.1 240.0 90.2 2.0 240 66.7 94.1 240 90.2 2 230 230 250 240 67 94 90 2 0.90 0.90 0.98 0.90 0.98 0.08 1.88
lavenderblush rgb:[255,240,245], hsl:[340.0,100.0, 97.1], hwb:[340.0, 94.1, 0.0] rgb(255 240 245) hsl(340 100% 97.1%) hwb(340 94.1% 0%) 255 240 245 340.0 100.0 97.1 340.0 94.1 0.0 340 100 97.1 340 94.1 0 255 240 245 340 100 97 94 0 1.00 0.94 0.96 0.94 1.00 0.06 1.94
lawngreen rgb:[124,252, 0], hsl:[ 90.5,100.0, 49.4], hwb:[ 90.5, 0.0, 1.2] rgb(124 252 0) hsl(90.5 100% 49.4%) hwb(90.5 0% 1.2%) 124 252 0 90.5 100.0 49.4 90.5 0.0 1.2 90.5 100 49.4 90.5 0 1.2 124 252 0 90 100 49 0 1 0.49 0.99 0.00 0.00 0.99 0.99 0.99
lemonchiffon rgb:[255,250,205], hsl:[ 54.0,100.0, 90.2], hwb:[ 54.0, 80.4, 0.0] rgb(255 250 205) hsl(54 100% 90.2%) hwb(54 80.4% 0%) 255 250 205 54.0 100.0 90.2 54.0 80.4 0.0 54 100 90.2 54 80.4 0 255 250 205 54 100 90 80 0 1.00 0.98 0.80 0.80 1.00 0.20 1.80
lightblue rgb:[173,216,230], hsl:[194.7, 53.3, 79.0], hwb:[194.7, 67.8, 9.8] rgb(173 216 230) hsl(194.7 53.3% 79%) hwb(194.7 67.8% 9.8%) 173 216 230 194.7 53.3 79.0 194.7 67.8 9.8 194.7 53.3 79 194.7 67.8 9.8 173 216 230 195 53 79 68 10 0.68 0.85 0.90 0.68 0.90 0.22 1.58
lightcoral rgb:[240,128,128], hsl:[ 0.0, 78.9, 72.2], hwb:[ 0.0, 50.2, 5.9] rgb(240 128 128) hsl(0 78.9% 72.2%) hwb(0 50.2% 5.9%) 240 128 128 0.0 78.9 72.2 0.0 50.2 5.9 0 78.9 72.2 0 50.2 5.9 240 128 128 0 79 72 50 6 0.94 0.50 0.50 0.50 0.94 0.44 1.44
lightcyan rgb:[224,255,255], hsl:[180.0,100.0, 93.9], hwb:[180.0, 87.8, 0.0] rgb(224 255 255) hsl(180 100% 93.9%) hwb(180 87.8% 0%) 224 255 255 180.0 100.0 93.9 180.0 87.8 0.0 180 100 93.9 180 87.8 0 224 255 255 180 100 94 88 0 0.88 1.00 1.00 0.88 1.00 0.12 1.88
lightgoldenrodyellow rgb:[250,250,210], hsl:[ 60.0, 80.0, 90.2], hwb:[ 60.0, 82.4, 2.0] rgb(250 250 210) hsl(60 80% 90.2%) hwb(60 82.4% 2%) 250 250 210 60.0 80.0 90.2 60.0 82.4 2.0 60 80 90.2 60 82.4 2 250 250 210 60 80 90 82 2 0.98 0.98 0.82 0.82 0.98 0.16 1.80
lightgray rgb:[211,211,211], hsl:[ 0.0, 0.0, 82.7], hwb:[ 0.0, 82.7, 17.3] rgb(211 211 211) hsl(0 0% 82.7%) hwb(0 82.7% 17.3%) 211 211 211 0.0 0.0 82.7 0.0 82.7 17.3 0 0 82.7 0 82.7 17.3 211 211 211 0 0 83 83 17 0.83 0.83 0.83 0.83 0.83 0.00 1.65
lightgreen rgb:[144,238,144], hsl:[120.0, 73.4, 74.9], hwb:[120.0, 56.5, 6.7] rgb(144 238 144) hsl(120 73.4% 74.9%) hwb(120 56.5% 6.7%) 144 238 144 120.0 73.4 74.9 120.0 56.5 6.7 120 73.4 74.9 120 56.5 6.7 144 238 144 120 73 75 56 7 0.56 0.93 0.56 0.56 0.93 0.37 1.50
lightgrey rgb:[211,211,211], hsl:[ 0.0, 0.0, 82.7], hwb:[ 0.0, 82.7, 17.3] rgb(211 211 211) hsl(0 0% 82.7%) hwb(0 82.7% 17.3%) 211 211 211 0.0 0.0 82.7 0.0 82.7 17.3 0 0 82.7 0 82.7 17.3 211 211 211 0 0 83 83 17 0.83 0.83 0.83 0.83 0.83 0.00 1.65
lightpink rgb:[255,182,193], hsl:[351.0,100.0, 85.7], hwb:[351.0, 71.4, 0.0] rgb(255 182 193) hsl(351 100% 85.7%) hwb(351 71.4% 0%) 255 182 193 351.0 100.0 85.7 351.0 71.4 0.0 351 100 85.7 351 71.4 0 255 182 193 351 100 86 71 0 1.00 0.71 0.76 0.71 1.00 0.29 1.71
lightsalmon rgb:[255,160,122], hsl:[ 17.1,100.0, 73.9], hwb:[ 17.1, 47.8, 0.0] rgb(255 160 122) hsl(17.1 100% 73.9%) hwb(17.1 47.8% 0%) 255 160 122 17.1 100.0 73.9 17.1 47.8 0.0 17.1 100 73.9 17.1 47.8 0 255 160 122 17 100 74 48 0 1.00 0.63 0.48 0.48 1.00 0.52 1.48
lightseagreen rgb:[ 32,178,170], hsl:[176.7, 69.5, 41.2], hwb:[176.7, 12.5, 30.2] rgb(32 178 170) hsl(176.7 69.5% 41.2%) hwb(176.7 12.5% 30.2%) 32 178 170 176.7 69.5 41.2 176.7 12.5 30.2 176.7 69.5 41.2 176.7 12.5 30.2 32 178 170 177 70 41 13 30 0.13 0.70 0.67 0.13 0.70 0.57 0.82
lightskyblue rgb:[135,206,250], hsl:[203.0, 92.0, 75.5], hwb:[203.0, 52.9, 2.0] rgb(135 206 250) hsl(203 92% 75.5%) hwb(203 52.9% 2%) 135 206 250 203.0 92.0 75.5 203.0 52.9 2.0 203 92 75.5 203 52.9 2 135 206 250 203 92 75 53 2 0.53 0.81 0.98 0.53 0.98 0.45 1.51
lightslategray rgb:[119,136,153], hsl:[210.0, 14.3, 53.3], hwb:[210.0, 46.7, 40.0] rgb(119 136 153) hsl(210 14.3% 53.3%) hwb(210 46.7% 40%) 119 136 153 210.0 14.3 53.3 210.0 46.7 40.0 210 14.3 53.3 210 46.7 40 119 136 153 210 14 53 47 40 0.47 0.53 0.60 0.47 0.60 0.13 1.07
lightslategrey rgb:[119,136,153], hsl:[210.0, 14.3, 53.3], hwb:[210.0, 46.7, 40.0] rgb(119 136 153) hsl(210 14.3% 53.3%) hwb(210 46.7% 40%) 119 136 153 210.0 14.3 53.3 210.0 46.7 40.0 210 14.3 53.3 210 46.7 40 119 136 153 210 14 53 47 40 0.47 0.53 0.60 0.47 0.60 0.13 1.07
lightsteelblue rgb:[176,196,222], hsl:[213.9, 41.1, 78.0], hwb:[213.9, 69.0, 12.9] rgb(176 196 222) hsl(213.9 41.1% 78%) hwb(213.9 69% 12.9%) 176 196 222 213.9 41.1 78.0 213.9 69.0 12.9 213.9 41.1 78 213.9 69 12.9 176 196 222 214 41 78 69 13 0.69 0.77 0.87 0.69 0.87 0.18 1.56
lightyellow rgb:[255,255,224], hsl:[ 60.0,100.0, 93.9], hwb:[ 60.0, 87.8, 0.0] rgb(255 255 224) hsl(60 100% 93.9%) hwb(60 87.8% 0%) 255 255 224 60.0 100.0 93.9 60.0 87.8 0.0 60 100 93.9 60 87.8 0 255 255 224 60 100 94 88 0 1.00 1.00 0.88 0.88 1.00 0.12 1.88
lime rgb:[ 0,255, 0], hsl:[120.0,100.0, 50.0], hwb:[120.0, 0.0, 0.0] rgb(0 255 0) hsl(120 100% 50%) hwb(120 0% 0%) 0 255 0 120.0 100.0 50.0 120.0 0.0 0.0 120 100 50 120 0 0 0 255 0 120 100 50 0 0 0.00 1.00 0.00 0.00 1.00 1.00 1.00
limegreen rgb:[ 50,205, 50], hsl:[120.0, 60.8, 50.0], hwb:[120.0, 19.6, 19.6] rgb(50 205 50) hsl(120 60.8% 50%) hwb(120 19.6% 19.6%) 50 205 50 120.0 60.8 50.0 120.0 19.6 19.6 120 60.8 50 120 19.6 19.6 50 205 50 120 61 50 20 20 0.20 0.80 0.20 0.20 0.80 0.61 1.00
linen rgb:[250,240,230], hsl:[ 30.0, 66.7, 94.1], hwb:[ 30.0, 90.2, 2.0] rgb(250 240 230) hsl(30 66.7% 94.1%) hwb(30 90.2% 2%) 250 240 230 30.0 66.7 94.1 30.0 90.2 2.0 30 66.7 94.1 30 90.2 2 250 240 230 30 67 94 90 2 0.98 0.94 0.90 0.90 0.98 0.08 1.88
magenta rgb:[255, 0,255], hsl:[300.0,100.0, 50.0], hwb:[300.0, 0.0, 0.0] rgb(255 0 255) hsl(300 100% 50%) hwb(300 0% 0%) 255 0 255 300.0 100.0 50.0 300.0 0.0 0.0 300 100 50 300 0 0 255 0 255 300 100 50 0 0 1.00 0.00 1.00 0.00 1.00 1.00 1.00
maroon rgb:[128, 0, 0], hsl:[ 0.0,100.0, 25.1], hwb:[ 0.0, 0.0, 49.8] rgb(128 0 0) hsl(0 100% 25.1%) hwb(0 0% 49.8%) 128 0 0 0.0 100.0 25.1 0.0 0.0 49.8 0 100 25.1 0 0 49.8 128 0 0 0 100 25 0 50 0.50 0.00 0.00 0.00 0.50 0.50 0.50
mediumaquamarine rgb:[102,205,170], hsl:[159.6, 50.7, 60.2], hwb:[159.6, 40.0, 19.6] rgb(102 205 170) hsl(159.6 50.7% 60.2%) hwb(159.6 40% 19.6%) 102 205 170 159.6 50.7 60.2 159.6 40.0 19.6 159.6 50.7 60.2 159.6 40 19.6 102 205 170 160 51 60 40 20 0.40 0.80 0.67 0.40 0.80 0.40 1.20
mediumblue rgb:[ 0, 0,205], hsl:[240.0,100.0, 40.2], hwb:[240.0, 0.0, 19.6] rgb(0 0 205) hsl(240 100% 40.2%) hwb(240 0% 19.6%) 0 0 205 240.0 100.0 40.2 240.0 0.0 19.6 240 100 40.2 240 0 19.6 0 0 205 240 100 40 0 20 0.00 0.00 0.80 0.00 0.80 0.80 0.80
mediumorchid rgb:[186, 85,211], hsl:[288.1, 58.9, 58.0], hwb:[288.1, 33.3, 17.3] rgb(186 85 211) hsl(288.1 58.9% 58%) hwb(288.1 33.3% 17.3%) 186 85 211 288.1 58.9 58.0 288.1 33.3 17.3 288.1 58.9 58 288.1 33.3 17.3 186 85 211 288 59 58 33 17 0.73 0.33 0.83 0.33 0.83 0.49 1.16
mediumpurple rgb:[147,112,219], hsl:[259.6, 59.8, 64.9], hwb:[259.6, 43.9, 14.1] rgb(147 112 219) hsl(259.6 59.8% 64.9%) hwb(259.6 43.9% 14.1%) 147 112 219 259.6 59.8 64.9 259.6 43.9 14.1 259.6 59.8 64.9 259.6 43.9 14.1 147 112 219 260 60 65 44 14 0.58 0.44 0.86 0.44 0.86 0.42 1.30
mediumseagreen rgb:[ 60,179,113], hsl:[146.7, 49.8, 46.9], hwb:[146.7, 23.5, 29.8] rgb(60 179 113) hsl(146.7 49.8% 46.9%) hwb(146.7 23.5% 29.8%) 60 179 113 146.7 49.8 46.9 146.7 23.5 29.8 146.7 49.8 46.9 146.7 23.5 29.8 60 179 113 147 50 47 24 30 0.24 0.70 0.44 0.24 0.70 0.47 0.94
mediumslateblue rgb:[123,104,238], hsl:[248.5, 79.8, 67.1], hwb:[248.5, 40.8, 6.7] rgb(123 104 238) hsl(248.5 79.8% 67.1%) hwb(248.5 40.8% 6.7%) 123 104 238 248.5 79.8 67.1 248.5 40.8 6.7 248.5 79.8 67.1 248.5 40.8 6.7 123 104 238 249 80 67 41 7 0.48 0.41 0.93 0.41 0.93 0.53 1.34
mediumspringgreen rgb:[ 0,250,154], hsl:[157.0,100.0, 49.0], hwb:[157.0, 0.0, 2.0] rgb(0 250 154) hsl(157 100% 49%) hwb(157 0% 2%) 0 250 154 157.0 100.0 49.0 157.0 0.0 2.0 157 100 49 157 0 2 0 250 154 157 100 49 0 2 0.00 0.98 0.60 0.00 0.98 0.98 0.98
mediumturquoise rgb:[ 72,209,204], hsl:[177.8, 59.8, 55.1], hwb:[177.8, 28.2, 18.0] rgb(72 209 204) hsl(177.8 59.8% 55.1%) hwb(177.8 28.2% 18%) 72 209 204 177.8 59.8 55.1 177.8 28.2 18.0 177.8 59.8 55.1 177.8 28.2 18 72 209 204 178 60 55 28 18 0.28 0.82 0.80 0.28 0.82 0.54 1.10
mediumvioletred rgb:[199, 21,133], hsl:[322.2, 80.9, 43.1], hwb:[322.2, 8.2, 22.0] rgb(199 21 133) hsl(322.2 80.9% 43.1%) hwb(322.2 8.2% 22%) 199 21 133 322.2 80.9 43.1 322.2 8.2 22.0 322.2 80.9 43.1 322.2 8.2 22 199 21 133 322 81 43 8 22 0.78 0.08 0.52 0.08 0.78 0.70 0.86
midnightblue rgb:[ 25, 25,112], hsl:[240.0, 63.5, 26.9], hwb:[240.0, 9.8, 56.1] rgb(25 25 112) hsl(240 63.5% 26.9%) hwb(240 9.8% 56.1%) 25 25 112 240.0 63.5 26.9 240.0 9.8 56.1 240 63.5 26.9 240 9.8 56.1 25 25 112 240 64 27 10 56 0.10 0.10 0.44 0.10 0.44 0.34 0.54
mintcream rgb:[245,255,250], hsl:[150.0,100.0, 98.0], hwb:[150.0, 96.1, 0.0] rgb(245 255 250) hsl(150 100% 98%) hwb(150 96.1% 0%) 245 255 250 150.0 100.0 98.0 150.0 96.1 0.0 150 100 98 150 96.1 0 245 255 250 150 100 98 96 0 0.96 1.00 0.98 0.96 1.00 0.04 1.96
mistyrose rgb:[255,228,225], hsl:[ 6.0,100.0, 94.1], hwb:[ 6.0, 88.2, 0.0] rgb(255 228 225) hsl(6 100% 94.1%) hwb(6 88.2% 0%) 255 228 225 6.0 100.0 94.1 6.0 88.2 0.0 6 100 94.1 6 88.2 0 255 228 225 6 100 94 88 0 1.00 0.89 0.88 0.88 1.00 0.12 1.88
moccasin rgb:[255,228,181], hsl:[ 38.1,100.0, 85.5], hwb:[ 38.1, 71.0, 0.0] rgb(255 228 181) hsl(38.1 100% 85.5%) hwb(38.1 71% 0%) 255 228 181 38.1 100.0 85.5 38.1 71.0 0.0 38.1 100 85.5 38.1 71 0 255 228 181 38 100 85 71 0 1.00 0.89 0.71 0.71 1.00 0.29 1.71
navajowhite rgb:[255,222,173], hsl:[ 35.9,100.0, 83.9], hwb:[ 35.9, 67.8, 0.0] rgb(255 222 173) hsl(35.9 100% 83.9%) hwb(35.9 67.8% 0%) 255 222 173 35.9 100.0 83.9 35.9 67.8 0.0 35.9 100 83.9 35.9 67.8 0 255 222 173 36 100 84 68 0 1.00 0.87 0.68 0.68 1.00 0.32 1.68
navy rgb:[ 0, 0,128], hsl:[240.0,100.0, 25.1], hwb:[240.0, 0.0, 49.8] rgb(0 0 128) hsl(240 100% 25.1%) hwb(240 0% 49.8%) 0 0 128 240.0 100.0 25.1 240.0 0.0 49.8 240 100 25.1 240 0 49.8 0 0 128 240 100 25 0 50 0.00 0.00 0.50 0.00 0.50 0.50 0.50
oldlace rgb:[253,245,230], hsl:[ 39.1, 85.2, 94.7], hwb:[ 39.1, 90.2, 0.8] rgb(253 245 230) hsl(39.1 85.2% 94.7%) hwb(39.1 90.2% 0.8%) 253 245 230 39.1 85.2 94.7 39.1 90.2 0.8 39.1 85.2 94.7 39.1 90.2 0.8 253 245 230 39 85 95 90 1 0.99 0.96 0.90 0.90 0.99 0.09 1.89
olive rgb:[128,128, 0], hsl:[ 60.0,100.0, 25.1], hwb:[ 60.0, 0.0, 49.8] rgb(128 128 0) hsl(60 100% 25.1%) hwb(60 0% 49.8%) 128 128 0 60.0 100.0 25.1 60.0 0.0 49.8 60 100 25.1 60 0 49.8 128 128 0 60 100 25 0 50 0.50 0.50 0.00 0.00 0.50 0.50 0.50
olivedrab rgb:[107,142, 35], hsl:[ 79.6, 60.5, 34.7], hwb:[ 79.6, 13.7, 44.3] rgb(107 142 35) hsl(79.6 60.5% 34.7%) hwb(79.6 13.7% 44.3%) 107 142 35 79.6 60.5 34.7 79.6 13.7 44.3 79.6 60.5 34.7 79.6 13.7 44.3 107 142 35 80 60 35 14 44 0.42 0.56 0.14 0.14 0.56 0.42 0.69
orange rgb:[255,165, 0], hsl:[ 38.8,100.0, 50.0], hwb:[ 38.8, 0.0, 0.0] rgb(255 165 0) hsl(38.8 100% 50%) hwb(38.8 0% 0%) 255 165 0 38.8 100.0 50.0 38.8 0.0 0.0 38.8 100 50 38.8 0 0 255 165 0 39 100 50 0 0 1.00 0.65 0.00 0.00 1.00 1.00 1.00
orangered rgb:[255, 69, 0], hsl:[ 16.2,100.0, 50.0], hwb:[ 16.2, 0.0, 0.0] rgb(255 69 0) hsl(16.2 100% 50%) hwb(16.2 0% 0%) 255 69 0 16.2 100.0 50.0 16.2 0.0 0.0 16.2 100 50 16.2 0 0 255 69 0 16 100 50 0 0 1.00 0.27 0.00 0.00 1.00 1.00 1.00
orchid rgb:[218,112,214], hsl:[302.3, 58.9, 64.7], hwb:[302.3, 43.9, 14.5] rgb(218 112 214) hsl(302.3 58.9% 64.7%) hwb(302.3 43.9% 14.5%) 218 112 214 302.3 58.9 64.7 302.3 43.9 14.5 302.3 58.9 64.7 302.3 43.9 14.5 218 112 214 302 59 65 44 15 0.85 0.44 0.84 0.44 0.85 0.42 1.29
palegoldenrod rgb:[238,232,170], hsl:[ 54.7, 66.7, 80.0], hwb:[ 54.7, 66.7, 6.7] rgb(238 232 170) hsl(54.7 66.7% 80%) hwb(54.7 66.7% 6.7%) 238 232 170 54.7 66.7 80.0 54.7 66.7 6.7 54.7 66.7 80 54.7 66.7 6.7 238 232 170 55 67 80 67 7 0.93 0.91 0.67 0.67 0.93 0.27 1.60
palegreen rgb:[152,251,152], hsl:[120.0, 92.5, 79.0], hwb:[120.0, 59.6, 1.6] rgb(152 251 152) hsl(120 92.5% 79%) hwb(120 59.6% 1.6%) 152 251 152 120.0 92.5 79.0 120.0 59.6 1.6 120 92.5 79 120 59.6 1.6 152 251 152 120 93 79 60 2 0.60 0.98 0.60 0.60 0.98 0.39 1.58
paleturquoise rgb:[175,238,238], hsl:[180.0, 64.9, 81.0], hwb:[180.0, 68.6, 6.7] rgb(175 238 238) hsl(180 64.9% 81%) hwb(180 68.6% 6.7%) 175 238 238 180.0 64.9 81.0 180.0 68.6 6.7 180 64.9 81 180 68.6 6.7 175 238 238 180 65 81 69 7 0.69 0.93 0.93 0.69 0.93 0.25 1.62
palevioletred rgb:[219,112,147], hsl:[340.4, 59.8, 64.9], hwb:[340.4, 43.9, 14.1] rgb(219 112 147) hsl(340.4 59.8% 64.9%) hwb(340.4 43.9% 14.1%) 219 112 147 340.4 59.8 64.9 340.4 43.9 14.1 340.4 59.8 64.9 340.4 43.9 14.1 219 112 147 340 60 65 44 14 0.86 0.44 0.58 0.44 0.86 0.42 1.30
papayawhip rgb:[255,239,213], hsl:[ 37.1,100.0, 91.8], hwb:[ 37.1, 83.5, 0.0] rgb(255 239 213) hsl(37.1 100% 91.8%) hwb(37.1 83.5% 0%) 255 239 213 37.1 100.0 91.8 37.1 83.5 0.0 37.1 100 91.8 37.1 83.5 0 255 239 213 37 100 92 84 0 1.00 0.94 0.84 0.84 1.00 0.16 1.84
peachpuff rgb:[255,218,185], hsl:[ 28.3,100.0, 86.3], hwb:[ 28.3, 72.5, 0.0] rgb(255 218 185) hsl(28.3 100% 86.3%) hwb(28.3 72.5% 0%) 255 218 185 28.3 100.0 86.3 28.3 72.5 0.0 28.3 100 86.3 28.3 72.5 0 255 218 185 28 100 86 73 0 1.00 0.85 0.73 0.73 1.00 0.27 1.73
peru rgb:[205,133, 63], hsl:[ 29.6, 58.7, 52.5], hwb:[ 29.6, 24.7, 19.6] rgb(205 133 63) hsl(29.6 58.7% 52.5%) hwb(29.6 24.7% 19.6%) 205 133 63 29.6 58.7 52.5 29.6 24.7 19.6 29.6 58.7 52.5 29.6 24.7 19.6 205 133 63 30 59 53 25 20 0.80 0.52 0.25 0.25 0.80 0.56 1.05
pink rgb:[255,192,203], hsl:[349.5,100.0, 87.6], hwb:[349.5, 75.3, 0.0] rgb(255 192 203) hsl(349.5 100% 87.6%) hwb(349.5 75.3% 0%) 255 192 203 349.5 100.0 87.6 349.5 75.3 0.0 349.5 100 87.6 349.5 75.3 0 255 192 203 350 100 88 75 0 1.00 0.75 0.80 0.75 1.00 0.25 1.75
plum rgb:[221,160,221], hsl:[300.0, 47.3, 74.7], hwb:[300.0, 62.7, 13.3] rgb(221 160 221) hsl(300 47.3% 74.7%) hwb(300 62.7% 13.3%) 221 160 221 300.0 47.3 74.7 300.0 62.7 13.3 300 47.3 74.7 300 62.7 13.3 221 160 221 300 47 75 63 13 0.87 0.63 0.87 0.63 0.87 0.24 1.49
powderblue rgb:[176,224,230], hsl:[186.7, 51.9, 79.6], hwb:[186.7, 69.0, 9.8] rgb(176 224 230) hsl(186.7 51.9% 79.6%) hwb(186.7 69% 9.8%) 176 224 230 186.7 51.9 79.6 186.7 69.0 9.8 186.7 51.9 79.6 186.7 69 9.8 176 224 230 187 52 80 69 10 0.69 0.88 0.90 0.69 0.90 0.21 1.59
purple rgb:[128, 0,128], hsl:[300.0,100.0, 25.1], hwb:[300.0, 0.0, 49.8] rgb(128 0 128) hsl(300 100% 25.1%) hwb(300 0% 49.8%) 128 0 128 300.0 100.0 25.1 300.0 0.0 49.8 300 100 25.1 300 0 49.8 128 0 128 300 100 25 0 50 0.50 0.00 0.50 0.00 0.50 0.50 0.50
rebeccapurple rgb:[102, 51,153], hsl:[270.0, 50.0, 40.0], hwb:[270.0, 20.0, 40.0] rgb(102 51 153) hsl(270 50% 40%) hwb(270 20% 40%) 102 51 153 270.0 50.0 40.0 270.0 20.0 40.0 270 50 40 270 20 40 102 51 153 270 50 40 20 40 0.40 0.20 0.60 0.20 0.60 0.40 0.80
red rgb:[255, 0, 0], hsl:[ 0.0,100.0, 50.0], hwb:[ 0.0, 0.0, 0.0] rgb(255 0 0) hsl(0 100% 50%) hwb(0 0% 0%) 255 0 0 0.0 100.0 50.0 0.0 0.0 0.0 0 100 50 0 0 0 255 0 0 0 100 50 0 0 1.00 0.00 0.00 0.00 1.00 1.00 1.00
rosybrown rgb:[188,143,143], hsl:[ 0.0, 25.1, 64.9], hwb:[ 0.0, 56.1, 26.3] rgb(188 143 143) hsl(0 25.1% 64.9%) hwb(0 56.1% 26.3%) 188 143 143 0.0 25.1 64.9 0.0 56.1 26.3 0 25.1 64.9 0 56.1 26.3 188 143 143 0 25 65 56 26 0.74 0.56 0.56 0.56 0.74 0.18 1.30
royalblue rgb:[ 65,105,225], hsl:[225.0, 72.7, 56.9], hwb:[225.0, 25.5, 11.8] rgb(65 105 225) hsl(225 72.7% 56.9%) hwb(225 25.5% 11.8%) 65 105 225 225.0 72.7 56.9 225.0 25.5 11.8 225 72.7 56.9 225 25.5 11.8 65 105 225 225 73 57 25 12 0.25 0.41 0.88 0.25 0.88 0.63 1.14
saddlebrown rgb:[139, 69, 19], hsl:[ 25.0, 75.9, 31.0], hwb:[ 25.0, 7.5, 45.5] rgb(139 69 19) hsl(25 75.9% 31%) hwb(25 7.5% 45.5%) 139 69 19 25.0 75.9 31.0 25.0 7.5 45.5 25 75.9 31 25 7.5 45.5 139 69 19 25 76 31 7 45 0.55 0.27 0.07 0.07 0.55 0.47 0.62
salmon rgb:[250,128,114], hsl:[ 6.2, 93.2, 71.4], hwb:[ 6.2, 44.7, 2.0] rgb(250 128 114) hsl(6.2 93.2% 71.4%) hwb(6.2 44.7% 2%) 250 128 114 6.2 93.2 71.4 6.2 44.7 2.0 6.2 93.2 71.4 6.2 44.7 2 250 128 114 6 93 71 45 2 0.98 0.50 0.45 0.45 0.98 0.53 1.43
sandybrown rgb:[244,164, 96], hsl:[ 27.6, 87.1, 66.7], hwb:[ 27.6, 37.6, 4.3] rgb(244 164 96) hsl(27.6 87.1% 66.7%) hwb(27.6 37.6% 4.3%) 244 164 96 27.6 87.1 66.7 27.6 37.6 4.3 27.6 87.1 66.7 27.6 37.6 4.3 244 164 96 28 87 67 38 4 0.96 0.64 0.38 0.38 0.96 0.58 1.33
seagreen rgb:[ 46,139, 87], hsl:[146.5, 50.3, 36.3], hwb:[146.5, 18.0, 45.5] rgb(46 139 87) hsl(146.5 50.3% 36.3%) hwb(146.5 18% 45.5%) 46 139 87 146.5 50.3 36.3 146.5 18.0 45.5 146.5 50.3 36.3 146.5 18 45.5 46 139 87 146 50 36 18 45 0.18 0.55 0.34 0.18 0.55 0.36 0.73
seashell rgb:[255,245,238], hsl:[ 24.7,100.0, 96.7], hwb:[ 24.7, 93.3, 0.0] rgb(255 245 238) hsl(24.7 100% 96.7%) hwb(24.7 93.3% 0%) 255 245 238 24.7 100.0 96.7 24.7 93.3 0.0 24.7 100 96.7 24.7 93.3 0 255 245 238 25 100 97 93 0 1.00 0.96 0.93 0.93 1.00 0.07 1.93
sienna rgb:[160, 82, 45], hsl:[ 19.3, 56.1, 40.2], hwb:[ 19.3, 17.6, 37.3] rgb(160 82 45) hsl(19.3 56.1% 40.2%) hwb(19.3 17.6% 37.3%) 160 82 45 19.3 56.1 40.2 19.3 17.6 37.3 19.3 56.1 40.2 19.3 17.6 37.3 160 82 45 19 56 40 18 37 0.63 0.32 0.18 0.18 0.63 0.45 0.80
silver rgb:[192,192,192], hsl:[ 0.0, 0.0, 75.3], hwb:[ 0.0, 75.3, 24.7] rgb(192 192 192) hsl(0 0% 75.3%) hwb(0 75.3% 24.7%) 192 192 192 0.0 0.0 75.3 0.0 75.3 24.7 0 0 75.3 0 75.3 24.7 192 192 192 0 0 75 75 25 0.75 0.75 0.75 0.75 0.75 0.00 1.51
skyblue rgb:[135,206,235], hsl:[197.4, 71.4, 72.5], hwb:[197.4, 52.9, 7.8] rgb(135 206 235) hsl(197.4 71.4% 72.5%) hwb(197.4 52.9% 7.8%) 135 206 235 197.4 71.4 72.5 197.4 52.9 7.8 197.4 71.4 72.5 197.4 52.9 7.8 135 206 235 197 71 73 53 8 0.53 0.81 0.92 0.53 0.92 0.39 1.45
slateblue rgb:[106, 90,205], hsl:[248.3, 53.5, 57.8], hwb:[248.3, 35.3, 19.6] rgb(106 90 205) hsl(248.3 53.5% 57.8%) hwb(248.3 35.3% 19.6%) 106 90 205 248.3 53.5 57.8 248.3 35.3 19.6 248.3 53.5 57.8 248.3 35.3 19.6 106 90 205 248 53 58 35 20 0.42 0.35 0.80 0.35 0.80 0.45 1.16
slategray rgb:[112,128,144], hsl:[210.0, 12.6, 50.2], hwb:[210.0, 43.9, 43.5] rgb(112 128 144) hsl(210 12.6% 50.2%) hwb(210 43.9% 43.5%) 112 128 144 210.0 12.6 50.2 210.0 43.9 43.5 210 12.6 50.2 210 43.9 43.5 112 128 144 210 13 50 44 44 0.44 0.50 0.56 0.44 0.56 0.13 1.00
slategrey rgb:[112,128,144], hsl:[210.0, 12.6, 50.2], hwb:[210.0, 43.9, 43.5] rgb(112 128 144) hsl(210 12.6% 50.2%) hwb(210 43.9% 43.5%) 112 128 144 210.0 12.6 50.2 210.0 43.9 43.5 210 12.6 50.2 210 43.9 43.5 112 128 144 210 13 50 44 44 0.44 0.50 0.56 0.44 0.56 0.13 1.00
snow rgb:[255,250,250], hsl:[ 0.0,100.0, 99.0], hwb:[ 0.0, 98.0, 0.0] rgb(255 250 250) hsl(0 100% 99%) hwb(0 98% 0%) 255 250 250 0.0 100.0 99.0 0.0 98.0 0.0 0 100 99 0 98 0 255 250 250 0 100 99 98 0 1.00 0.98 0.98 0.98 1.00 0.02 1.98
springgreen rgb:[ 0,255,127], hsl:[149.9,100.0, 50.0], hwb:[149.9, 0.0, 0.0] rgb(0 255 127) hsl(149.9 100% 50%) hwb(149.9 0% 0%) 0 255 127 149.9 100.0 50.0 149.9 0.0 0.0 149.9 100 50 149.9 0 0 0 255 127 150 100 50 0 0 0.00 1.00 0.50 0.00 1.00 1.00 1.00
steelblue rgb:[ 70,130,180], hsl:[207.3, 44.0, 49.0], hwb:[207.3, 27.5, 29.4] rgb(70 130 180) hsl(207.3 44% 49%) hwb(207.3 27.5% 29.4%) 70 130 180 207.3 44.0 49.0 207.3 27.5 29.4 207.3 44 49 207.3 27.5 29.4 70 130 180 207 44 49 27 29 0.27 0.51 0.71 0.27 0.71 0.43 0.98
tan rgb:[210,180,140], hsl:[ 34.3, 43.8, 68.6], hwb:[ 34.3, 54.9, 17.6] rgb(210 180 140) hsl(34.3 43.8% 68.6%) hwb(34.3 54.9% 17.6%) 210 180 140 34.3 43.8 68.6 34.3 54.9 17.6 34.3 43.8 68.6 34.3 54.9 17.6 210 180 140 34 44 69 55 18 0.82 0.71 0.55 0.55 0.82 0.27 1.37
teal rgb:[ 0,128,128], hsl:[180.0,100.0, 25.1], hwb:[180.0, 0.0, 49.8] rgb(0 128 128) hsl(180 100% 25.1%) hwb(180 0% 49.8%) 0 128 128 180.0 100.0 25.1 180.0 0.0 49.8 180 100 25.1 180 0 49.8 0 128 128 180 100 25 0 50 0.00 0.50 0.50 0.00 0.50 0.50 0.50
thistle rgb:[216,191,216], hsl:[300.0, 24.3, 79.8], hwb:[300.0, 74.9, 15.3] rgb(216 191 216) hsl(300 24.3% 79.8%) hwb(300 74.9% 15.3%) 216 191 216 300.0 24.3 79.8 300.0 74.9 15.3 300 24.3 79.8 300 74.9 15.3 216 191 216 300 24 80 75 15 0.85 0.75 0.85 0.75 0.85 0.10 1.60
tomato rgb:[255, 99, 71], hsl:[ 9.1,100.0, 63.9], hwb:[ 9.1, 27.8, 0.0] rgb(255 99 71) hsl(9.1 100% 63.9%) hwb(9.1 27.8% 0%) 255 99 71 9.1 100.0 63.9 9.1 27.8 0.0 9.1 100 63.9 9.1 27.8 0 255 99 71 9 100 64 28 0 1.00 0.39 0.28 0.28 1.00 0.72 1.28
turquoise rgb:[ 64,224,208], hsl:[174.0, 72.1, 56.5], hwb:[174.0, 25.1, 12.2] rgb(64 224 208) hsl(174 72.1% 56.5%) hwb(174 25.1% 12.2%) 64 224 208 174.0 72.1 56.5 174.0 25.1 12.2 174 72.1 56.5 174 25.1 12.2 64 224 208 174 72 56 25 12 0.25 0.88 0.82 0.25 0.88 0.63 1.13
violet rgb:[238,130,238], hsl:[300.0, 76.1, 72.2], hwb:[300.0, 51.0, 6.7] rgb(238 130 238) hsl(300 76.1% 72.2%) hwb(300 51% 6.7%) 238 130 238 300.0 76.1 72.2 300.0 51.0 6.7 300 76.1 72.2 300 51 6.7 238 130 238 300 76 72 51 7 0.93 0.51 0.93 0.51 0.93 0.42 1.44
wheat rgb:[245,222,179], hsl:[ 39.1, 76.7, 83.1], hwb:[ 39.1, 70.2, 3.9] rgb(245 222 179) hsl(39.1 76.7% 83.1%) hwb(39.1 70.2% 3.9%) 245 222 179 39.1 76.7 83.1 39.1 70.2 3.9 39.1 76.7 83.1 39.1 70.2 3.9 245 222 179 39 77 83 70 4 0.96 0.87 0.70 0.70 0.96 0.26 1.66
white rgb:[255,255,255], hsl:[ 0.0, 0.0,100.0], hwb:[ 0.0,100.0, 0.0] rgb(255 255 255) hsl(0 0% 100%) hwb(0 100% 0%) 255 255 255 0.0 0.0 100.0 0.0 100.0 0.0 0 0 100 0 100 0 255 255 255 0 0 100 100 0 1.00 1.00 1.00 1.00 1.00 0.00 2.00
whitesmoke rgb:[245,245,245], hsl:[ 0.0, 0.0, 96.1], hwb:[ 0.0, 96.1, 3.9] rgb(245 245 245) hsl(0 0% 96.1%) hwb(0 96.1% 3.9%) 245 245 245 0.0 0.0 96.1 0.0 96.1 3.9 0 0 96.1 0 96.1 3.9 245 245 245 0 0 96 96 4 0.96 0.96 0.96 0.96 0.96 0.00 1.92
yellow rgb:[255,255, 0], hsl:[ 60.0,100.0, 50.0], hwb:[ 60.0, 0.0, 0.0] rgb(255 255 0) hsl(60 100% 50%) hwb(60 0% 0%) 255 255 0 60.0 100.0 50.0 60.0 0.0 0.0 60 100 50 60 0 0 255 255 0 60 100 50 0 0 1.00 1.00 0.00 0.00 1.00 1.00 1.00
yellowgreen rgb:[154,205, 50], hsl:[ 79.7, 60.8, 50.0], hwb:[ 79.7, 19.6, 19.6] rgb(154 205 50) hsl(79.7 60.8% 50%) hwb(79.7 19.6% 19.6%) 154 205 50 79.7 60.8 50.0 79.7 19.6 19.6 79.7 60.8 50 79.7 19.6 19.6 154 205 50 80 61 50 20 20 0.60 0.80 0.20 0.20 0.80 0.61 1.00

Sheet 19: color

rgb to xyz-d65







[








CFunc rgbToLab()
rdrr.io XYZ whitepoint table
16
0.008856 903.3 903.2962962963 0.008856451679
CFunc colorjs diff colormath diff math - js



6.7772399283


0.612874906 -61.28%
rgb colormine.org d50 d65
D50 0.9642200 1 0.8252100
116 0.001 0.9032963 0.9032920 7.787

0.4820152 0.4820152 0.0000000 0.48202 -0.0000048 0.0000048 0.0000255 0.0000255 0.4819897
-9.3945032053


0.987836817 -98.78%
84 89.58034 89.40564 89.57784
D50.ICC 0.9642029 1 0.8249054
0.1379310345 0.010 8.9914424
0.1379310345

0.7539755 0.7539755 0.0000000 0.75398 -0.0000045 0.0000045 0.0000224 0.0000224 0.7539531
2.6040686475


0.766584275 -76.65%
252 -56.35172 -55.14190 -56.35528
D65 0.9504700 1 1.0888300







0.6305360 0.6305360 0.0000000 0.63054 -0.0000040 0.0000040 0.0001255 0.0001255 0.6304105 ]






194 15.33217 14.64151 15.33759





















0.890295692 0.160670193 165.8706929
color(a98-rgb 0.0000255352380269525 0.0000223862358920135 0.000125480433031955)




vs d50

easyRGB XYZ whitepoint table







rgb to xyz-d50







89.4060486 57.0506355 165.106861






-0.00250

D50 96.422 100 82.521 96.720 100 81.427




CFunc colorjs diff





89.03% -0.15580948 0.039221373
rgb(32.94117647% 98.82% 76.07843137%)


-0.00356

D65 95.047 100 108.883 94.811 100 107.304




0.4907714 0.4907714 0.0000000





0.088655586 0.97344529 0.539479489






0.00543













0.7502787 0.7502787 0.0000000





0.088655586 8.8655586






0.00000



0.9642956764 1 0.8251046025







0.4809797 0.4809797 0.0000000





0.97344529 97.344529
89.40659 -0.00095




colorjs.io colorizer.org

0.9504559271 1 1.0890577508












0.00885645167904


0.539479489 53.9479489
-55.14149 -0.00040



89.4056371272 89.40605 89.58
ninedegreesbelow







rgb to lab



903.2962962963





14.66339 -0.02188



-55.1418970207 -55.13410 -56.35

0.964202881 1 0.824905396 100 107.304





CFunc colorjs diff

0.4547069272





0.00041 at 82.49


14.6415097029 14.662987356759 15.33












0.4907714 0.4907714 0.0000000















vs d50 vs d65





0.331





0.7502787 0.7502787 0.0000000

16,777,216





14.6629873567589




-0.00041 -0.00041 0.00












0.4809797 0.4809797 0.0000000

1.09929682680942





-0.0000000000001 at 82.4893978408


-0.00780 -0.00780 -0.01





35.517624










0.4547069272











-0.02148 -0.02148 0.01





324.1812688822





rgb to prophoto-rgb



0.4166666667












oklch.com easyRGB












me colorjs
















89.41 89.578












0.6733265521 0.6370580 0.0362686




srgb-linear


89.41% 57.05 165.11



-55.13 -56.355












0.8524647195 0.9280215 -0.0755568




hsl

[






14.66 15.338





0.412221 0.536333 0.051446
0.412391 0.357584 0.180481
0.6659405581 0.7409478 -0.0750072




hwb


8.8655586286 8.8655586 0.0000000



vs d50 vs d65





0.211903 0.680700 0.107397
0.212639 0.715169 0.072192



0.4125, 0.3576, 0.1804



lch


97.3445290398 97.344529 0.0000000



0.00 0.000





0.088302 0.281719 0.629979
0.019331 0.119195 0.950532



0.2127, 0.7152, 0.0722



oklch


53.9479489012 53.9479489 0.0000000



-0.01 0.000















0.0193, 0.1192, 0.9503



lab

]






-0.02 0.000












0.4124564 0.3575761 0.1804375 0.4125 0.3576 0.1804

oklab




0.890295692 -0.15580948 0.039221373)

82.4893978408













0.2126729 0.7151522 0.072175 0.2127 0.7152 0.0722

a98-rgb




0.890295692 0.160670191 165.8706929)

14.6629873567589













0.0193339 0.119192 0.9503041 0.0193 0.1192 0.9503

prophoto-rgb









-0.0000000000001





















display-p3


0.0180539685























0.4124 0.3576 0.1805

rec2020

javascript: 1.09929682680941





colorjs
CFunc














0.2126 0.7152 0.0722

xyz-d50

russellCottrell: 1.09929682680944




d50: 0.490771439 49.0771438996 49.07143 -0.005715 49.0689012675
-0.00824 -0.0025277









0.0193 0.1192 0.9505

xyz-d65

Excel: 1.09929682680942
fujiwaratko



0.7502787243 75.0278724275 75.02902 0.001146 75.0269938094
-0.00088 0.0002675



















d50: 0.4360410 0.3851130 0.1430460

0.4809797092 48.0979709208 48.08649 -0.011479 48.1042932511
0.00632 0.0051566









-0.0001 0.0000 0.0001





2.19921875
0.2224850 0.7169050 0.0606100







colormine.org


colorizer






-0.0001 0.0000 0.0000





2.19921875
0.0139200 0.0970670 0.7139130
d65: 0.4820151844 48.2015184412 48.1989664762 -0.002552 48.1989664762
48.2041647397 -0.0051982635 0.0026462985
48.2 -0.0010335238





0.0000 0.0000 0.0002







lindholm



0.7539755478 75.3975547802 75.3953113764 -0.002243 75.3953113764
75.4006668444 -0.005355468 0.0031120642
75.4 -0.0046886236















d50: 0.4360747 0.3850649 0.1430804

0.6305358933 63.053589334 63.0410519567 -0.012537 63.0410519567
63.0520985737 -0.011046617 -0.0014907603
63.05 -0.0089480433





0.4125 0.3576 0.1804







0.2225045 0.7168786 0.0606169



















0.2127 0.7152 0.0722







0.0139322 0.0971045 0.7141733





-0.002551965












0.0193 0.1192 0.9503

16.67













-0.0022434038









color xyz-d50 0.4907714 0.7502787 0.4809797


5000



d65: 0.4124564 0.3575761 0.1804375





-0.0125373773

















300




0.2126729 0.7151522 0.0721750
















0.4123908 0.3575843 0.1804808




4.2




0.0193339 0.1191920 0.9503041
















0.2126390 0.7151687 0.0721923




4




saturncloud


















0.0193308 0.1191948 0.9505322




300



d65: 0.4124564 0.3575761 0.1804375
























255




0.2126729 0.7151522 0.0721750
















1.0479298 0.0229468 -0.0501922

color(ictcp 0.15 0.19 -0.1)

63.75




0.0193339 0.1191920 0.9503041
















0.0296278 0.9904345 -0.0170738

lab(2.79 17.4 -38)



























-0.0092431 0.0150551 0.7518743










0.0000000 0.0000000 0.0000000





















color(jzczhz 0.02 0.08 263)







0.0000000 0.0000000 0.0000000
















0.4321566



lab(2.79 17.4 -38)







0.0000000 0.0000000 0.0000000
































































-0.0236183 -0.0274888 0.0373571






























-0.0098316 -0.0017264 0.0115581






























0.0054017 0.0220875 0.2361308

















Sheet 20: eases







type: io:
legsInOut [{type:E.in}, {type:E.out}]



linear E.in
easeInPow Math.pow(pow)



pow E.out
easeOutPow 1 - Math.pow(1 - x, pow)



sine E.inOut
easeInSine 1 - Math.cos((x * Math.PI) / 2)



expo E.outIn
easeOutSine Math.sin((x * Math.PI) / 2)



circ
easeInOutSine -(Math.cos (x * Math.PI) - 1) / 2



back
easeInExpo x == 0 ? 0 : Math.pow(2, 10 * x - 10)



elastic
easeOutExpo x == 1 ? 1 : 1 - Math.pow(2, -10 * x)



bounce






cubic






step








CSS
Webkit CSS easings.net
ease 0.25 0.1 0.25 1


ease-in 0.42 0 1 1
Math.pow(x, 1.685)
ease-out 0 0 0.58 1
1 - Math.pow(1-x, 1.685)
ease-in-out 0.42 0 0.58 1
EIO = 0.5 * Math.pow(0.5, 1.925); x < 0.5
jQuery
? EIO * Math.pow(x, 1.925) : 1 - EIO * Math.pow(1 - x, 1.925)
InSine 0.47 0 0.745 0.715 {ease:sine}
1 - cos((x * PI) / 2)
OutSine 0.39 0.575 0.565 1 {ease:sine, type:E.out}
sin((x * PI) / 2)
InOutSine 0.445 0.05 0.55 0.95

-(cos(PI * x) - 1) / 2
InQuad 0.55 0.085 0.68 0.53 {pow:2} x * x x * x
OutQuad 0.25 0.46 0.45 0.94 {pow:2, type:E.out} x -= 1; 1 - (x * x) 1 - (1 - x) * (1 - x)
InOutQuad 0.455 0.03 0.515 0.955 {pow:2, legs:legsInOut} x < 0.5 ? 2 * x * x : x -= 1; 1 - (2 * x * x) x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2
InCubic 0.55 0.055 0.675 0.19 {pow:3} x * x * x x * x * x
OutCubic 0.215 0.61 0.355 1 {pow:3, type:E.out} x -= 1; 1 - (x * x * x) 1 - pow(1 - x, 3)
InOutCubic 0.645 0.045 0.355 1 {pow:3, legs:legsInOut} x < 0.5 ? 4 * x * x * x : x -= 1; 1 + (4 * x * x * x) x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2
InQuart 0.895 0.03 0.685 0.22 {pow:4}
x * x * x * x
OutQuart 0.165 0.84 0.44 1 {pow:4, type:E.out}
1 - pow(1 - x, 4)
InOutQuart 0.77 0 0.175 1 {pow:4, legs:legsInOut} x < 0.5 ? 8 * x * x * x * x : x -= 1; 1 + (8 * x * x * x * x) x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2
InQuint 0.755 0.05 0.855 0.060 {pow:5}
x * x * x * x * x
OutQuint 0.23 1 0.32 1 {pow:5, type:E.out}
1 - pow(1 - x, 5)
InOutQuint 1 0 0.07 1 {pow:5, legs:legsInOut} x < 0.5 ? 16 * x * x * x * x * x : x -= 1; 1 + (16 * x * x * x * x * x) x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2
InExpo 0.95 0.05 0.795 0.035

x === 0 ? 0 : pow(2, 10 * x - 10)
OutExpo 0 1 0.22 1

x === 1 ? 1 : 1 - pow(2, -10 * x)
InOutExpo 1 0 0 1


InCirc 0.6 0.04 0.98 0.335

1 - sqrt(1 - pow(x, 2))
OutCirc 0.075 0.82 0.165 1

sqrt(1 - pow(x - 1, 2))
InOutCirc 0.785 0.135 0.15 0.86


InBack 0.6 -0.28 0.735 0.045

c3 * x * x * x - c1 * x * x
OutBack 0.175 0.885 0.32 1.275

1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2)
InOutBack 0.68 -0.55 0.265 1.55










easings.net


InElastic






OutElastic






InOutElastic






InBounce






OutBounce






InOutBounce







Sheet 21: devices



Viewport (r = w / h) Device (r = w / h)
Aspect Ratio Width Height
Device Viewport (r = w / h) Device (r = w / h)
Aspect Ratio Width Height















Type Device r w h r w h
max diff max diff max diff








max diff max diff max diff















Watch Realme Watch 2020 1.000 160 160 1.000 320 320
1.217 1.217 0.000 414 1644 1230 1004 3840 2836
iPhone 12 0.462 390 844 0.462 1170 2532
0.750 0.750 0.000 1024 2048 1024 1366 2960 1594















Watch LG Watch W7 1.000 180 180 1.000 360 360
min min min
iPhone 12 Mini 0.462 360 780 0.462 1080 2340
min min min















Watch Samsung Watch 1.2" 1.000 180 180 1.000 360 360
0.410 0.410 0.001 160 320 160 160 320 160
iPhone 12 Pro 0.462 390 844 0.462 1170 2532
0.462 0.449 0.012 214 640 426 379 1024 645















Watch Samsung Watch 1.3" 1.000 180 180 1.000 360 360










iPhone 12 Pro Max 0.462 428 926 0.449 1248 2778

























Watch Samsung Watch 3 1.2" - 2020 1.000 180 180 1.000 360 360
range
range
range

iPhone SE 0.565 214 379 0.563 640 1136
range
range
range
1030














Watch Samsung Watch 3 1.4" - 2020 1.000 180 180 1.000 360 360
0.807 0.808
254 1324
844 3520

iPhone 11 Pro Max 0.462 414 896 0.462 1242 2688
0.288 0.301
810 1408
987 1936
635




24








Watch Samsung Watch 1.2" - 2019 1.000 180 180 1.000 360 360
median*
median
median

iPhone 11 Xs Max 0.462 414 896 0.462 1242 2688


median
median






480








Watch Samsung Watch 1.4" - 2019 1.000 180 180 1.000 360 360
0.474 0.474
360 1080
780 2340

iPhone 11 0.462 414 896 0.462 828 1792
0.562 0.563
411 1170
780 2436






11520








Watch Apple Watch Series (40mm) 1.216 197 162 1.216 394 324
average*
average
average

iPhone 11 Xr 0.462 414 896 0.462 828 1792


average
average
















Watch Apple Watch Series (44mm) 1.217 224 184 1.217 448 368
0.695 0.695
309 891.3846153846
506.1282051282 1496.358974359

iPhone 11 Pro 0.462 375 812 0.462 1125 2436
0.562 0.562
469 1215.9555555556
820.9555555556 2194.5333333333
















Watch Huawei Watch GT 1.000 227 227 1.000 454 454










iPhone 11 X 0.462 375 812 0.462 1125 2436










0.156250













Watch Xiaomi Mi Watch 2020 1.000 227 227 1.000 454 454
*0.563 is portrait HD: 1080 x 1920







iPhone 11 Xs 0.462 375 812 0.462 1125 2436
*0.563 is portrait HD: 1080 x 1920







0.03125













Watch Xiaomi Mi Watch Revolve 2020 1.000 227 227 1.000 454 454
Everything here is portrait orientation








iPhone X 0.462 375 812 0.462 1125 2436
Everything here is portrait orientation








0.0625
0.15625











Mobile Apple iPhone 5 0.563 320 568 0.563 640 1136










iPhone 8 Plus 0.563 414 736 0.563 1080 1920

























Mobile Apple iPhone 5c 0.563 320 568 0.563 640 1136










iPhone 8 0.562 375 667 0.562 750 1334









16th 8th 3/16ths quarter 5/16ths 3/8ths 7/16ths half 9/16ths 5/8ths 11/16ths 3 quarters 13/16ths 7/8ths 15/16ths whole
Mobile Apple iPhone 5s 0.563 320 568 0.563 640 1136










iPhone 7 Plus 0.563 414 736 0.563 1080 1920









0.0625 0.125 0.1875 0.25 0.3125 0.375 0.4375 0.5 0.5625 0.625 0.6875 0.75 0.8125 0.875 0.9375 1
Mobile Apple iPhone SE 0.563 320 568 0.563 640 1136
375 985 0.3807106599
333 320



iPhone 7 0.562 375 667 0.562 750 1334

























Mobile LG K20 (2019) 0.500 320 640 0.500 480 960

914 308
-59
274


iPhone 6s Plus 0.563 414 736 0.563 1080 1920









line-height mono Roboto












Mobile Honor 6X 0.563 360 640 0.563 1080 1920

71 677
370
703


iPhone 6s 0.562 375 667 0.562 750 1334









1.0000rem 289px
18.0625











Mobile HTC One 0.563 360 640 0.563 1080 1920

642 642






iPhone 6 Plus 0.563 414 736 0.563 1080 1920









1.0625rem 298px
18.625











Mobile HTC One M8 0.563 360 640 0.563 1080 1920

571 -34.9642857143






iPhone 6 0.562 375 667 0.562 750 1334









1.1250rem 307px
19.1875











Mobile HTC One M9 0.563 360 640 0.563 1080 1920



w h r



iPad Pro 0.750 1024 1366 0.750 2048 2732









1.2500rem
327px 0











Mobile HTC U Ultra 0.563 360 640 0.563 1440 2560


viewBox 872 618 0.7087155963



iPad 3rd & 4th Gen 0.750 768 1024 0.750 1536 2048









1.3125rem
336px 0











Mobile HTC U11 0.563 360 640 0.563 1440 2560


w, h 452 320 0.7087155963



iPad Air 1 & 2 0.750 768 1024 0.750 1536 2048

























Mobile Huawei P10 Plus 0.563 360 640 0.563 1440 2560


r 0.518 0.518




iPad Mini 0.750 768 1024 0.750 768 1024

























Mobile Huawei P8 Lite (2017) 0.563 360 640 0.563 1080 1920










iPad Mini 2 & 3 0.750 768 1024 0.750 1536 2048

























Mobile Huawei P9, P9 Lite 0.563 360 640 0.563 1080 1920



fps ms/frame




Nexus 6P 0.562 411 731 0.563 1440 2560

























Mobile LG G4, G3 0.563 360 640 0.563 1440 2560


1000 160 6.250




Nexus 5X 0.562 411 731 0.563 1080 1920

























Mobile LG G5 0.563 360 640 0.563 1440 2560


1000 165 6.0606060606




Google Pixel 0.562 411 731 0.563 1080 1920

























Mobile LG K10, K11 Plus 0.563 360 640 0.563 720 1280


1000 170 5.882




Google Pixel XL 0.562 411 731 0.563 1440 2560

























Mobile LG K30 0.563 360 640 0.563 720 1280


1000 175 5.714




Google Pixel 2 0.562 411 731 0.563 1080 1920

























Mobile LG Nexus 5 0.563 360 640 0.563 1080 1920


1000 180 5.5555555556




Google Pixel 2 XL 0.499 411 823 0.500 1440 2880

























Mobile LG Tribute Empire 0.563 360 640 0.563 720 1280


1000 240 4.1666666667




Samsung Galaxy Note 5 0.563 480 853 0.563 1440 2560

























Mobile Samsung Note 3 0.563 360 640 0.563 1080 1920


1000 360 2.7777777778




LG G5 0.563 360 640 0.563 1440 2560

























Mobile Samsung Note 4 0.563 360 640 0.563 1440 2560


1000 480 2.0833333333




LG G4 0.563 360 640 0.563 1440 2560

























Mobile Samsung S6 0.563 360 640 0.563 1440 2560










LG G3 0.563 360 640 0.563 1440 2560

























Mobile Samsung S6 edge 0.563 360 640 0.563 1440 2560










One Plus 3 0.563 480 853 0.563 1080 1920

























Mobile Samsung S7 0.563 360 640 0.563 1440 2560










Samsung Galaxy S9 0.486 360 740 0.486 1440 2960

























Mobile Samsung S7 Edge 0.563 360 640 0.563 1440 2560










Samsung Galaxy S9+ 0.486 360 740 0.486 1440 2960

























Mobile Sony Xperia X 0.563 360 640 0.563 1080 1920










Samsung Galaxy S8 0.486 360 740 0.486 1440 2960

























Mobile Sony Xperia XZ 0.563 360 640 0.563 1080 1920










Samsung Galaxy S8+ 0.486 360 740 0.486 1440 2960

























Mobile Sony Xperia Z2 / Z3 0.563 360 640 0.563 1080 1920










Samsung Galaxy S7 0.563 360 640 0.563 1440 2560

























Mobile Sony Xperia Z3 0.563 360 640 0.563 1080 1920










Samsung Galaxy S7 Edge 0.563 360 640 0.563 1440 2560

























Mobile Sony Xperia Z5 0.563 360 640 0.563 1080 1920










Nexus 7 (2013) 0.625 600 960 0.625 1200 1920

























Mobile Xiaomi Mi 3 0.563 360 640 0.563 1080 1920










Nexus 9 0.750 768 1024 0.750 1536 2048

























Mobile Honor 7X 0.500 360 720 0.500 1080 2160










Samsung Galaxy Tab 10 0.625 800 1280 0.625 800 1280

























Mobile HTC U11+ 0.500 360 720 0.500 1440 2880










Chromebook Pixel 0.664 850 1280 0.664 1700 2560

























Mobile HTC U12+ 0.500 360 720 0.500 1440 2880











































Mobile Huawei Mate 10 Lite 0.500 360 720 0.500 1080 2160











































Mobile LG G6 0.500 360 720 0.500 1440 2880











































Mobile LG K40 0.500 360 720 0.500 720 1440











































Mobile LG Stylo 4 0.500 360 720 0.500 1080 2160











































Mobile LG Stylo 5 0.500 360 720 0.500 1080 2160











































Mobile Samsung A6s 0.500 360 720 0.500 1080 2160











































Mobile Samsung Note 8 0.486 360 740 0.486 1440 2960











































Mobile Samsung Note 9 0.486 360 740 0.486 1440 2960











































Mobile Samsung S8 0.486 360 740 0.486 1440 2960











































Mobile Samsung S8+ 0.486 360 740 0.486 1440 2960











































Mobile Samsung S9 0.486 360 740 0.486 1440 2960











































Mobile Samsung S9+ 0.486 360 740 0.486 1440 2960











































Mobile Huawei P20 Pro 0.482 360 747 0.482 1080 2240











































Mobile HTC Desire 19s 0.474 360 760 0.474 720 1520











































Mobile HTC Wildfire X 0.474 360 760 0.474 720 1520











































Mobile Huawei P20 lite 0.474 360 760 0.474 1080 2280











































Mobile LG K50 0.474 360 760 0.474 720 1520











































Mobile LG W30 0.474 360 760 0.474 720 1520











































Mobile Samsung S10 0.474 360 760 0.474 1440 3040











































Mobile Huawei Nova 7i 0.468 360 770 0.468 1080 2310











































Mobile Huawei P40 Lite 0.468 360 770 0.468 1080 2310











































Mobile Huawei P30 Lite 0.467 360 771 0.467 1080 2312











































Mobile Apple iPhone 12 mini 0.462 360 780 0.462 1080 2340











































Mobile Apple iPhone 13 mini 0.462 360 780 0.462 1080 2340











































Mobile Honor 8X 0.462 360 780 0.462 1080 2340











































Mobile Honor 9X 0.462 360 780 0.462 1080 2340











































Mobile Huawei Mate 20 Lite 0.462 360 780 0.462 1080 2340











































Mobile Huawei Mate 20 Pro 0.462 360 780 0.462 1440 3120











































Mobile Huawei Mate 30 0.462 360 780 0.462 1080 2340











































Mobile Huawei Nova 7 Pro 0.462 360 780 0.462 1080 2340











































Mobile Huawei P30 0.462 360 780 0.462 1080 2340











































Mobile Huawei P30 Pro 0.462 360 780 0.462 1080 2340











































Mobile Huawei P40 0.462 360 780 0.462 1080 2340











































Mobile Huawei Y9 Prime 0.462 360 780 0.462 1080 2340











































Mobile Huawei Y9s 0.462 360 780 0.462 1080 2340











































Mobile LG G7 Fit, G7 One 0.462 360 780 0.462 1440 3120











































Mobile LG G8 ThinQ 0.462 360 780 0.462 1440 3120











































Mobile LG G8X ThinQ 0.462 360 780 0.462 1080 2340











































Mobile LG K61 0.462 360 780 0.462 1080 2340











































Mobile Motorola Moto G8 0.462 360 780 0.462 720 1560











































Mobile Huawei Nova 6 0.450 360 800 0.450 1080 2400











































Mobile Huawei Nova 7 SE 0.450 360 800 0.450 1080 2400











































Mobile LG K51S 0.450 360 800 0.450 720 1600











































Mobile Samsung S20 0.450 360 800 0.450 1440 3200











































Mobile Sony Xperia 10 0.429 360 840 0.429 1080 2520











































Mobile Sony Xperia 10 Plus 0.429 360 840 0.429 1080 2520











































Mobile Sony Xperia 5 0.429 360 840 0.429 1080 2520











































Mobile Sony Xperia L4 0.429 360 840 0.429 720 1680











































Mobile Apple iPhone 6 0.562 375 667 0.562 750 1334











































Mobile Apple iPhone 6s 0.562 375 667 0.562 750 1334











































Mobile Apple iPhone 7 0.562 375 667 0.562 750 1334











































Mobile Apple iPhone 8 0.562 375 667 0.562 750 1334











































Mobile Apple iPhone SE (2020) 0.562 375 667 0.562 750 1334











































Mobile Apple iPhone SE (2022) 0.562 375 667 0.562 750 1334











































Mobile Apple iPhone 11 Pro 0.462 375 812 0.462 1125 2436











































Mobile Apple iPhone X 0.462 375 812 0.462 1125 2436











































Mobile Samsung S20+ 0.450 384 854 0.450 1440 3200











































Mobile Samsung S21 Ultra 5G 0.450 384 854 0.450 1440 3200











































Mobile vivo Y20 0.451 385 854 0.450 720 1600











































Mobile Apple iPhone 12 0.462 390 844 0.462 1170 2532











































Mobile Apple iPhone 12 Pro 0.462 390 844 0.462 1170 2532











































Mobile Apple iPhone 13 0.462 390 844 0.462 1170 2532











































Mobile Apple iPhone 13 Pro 0.462 390 844 0.462 1170 2532











































Mobile Apple iPhone 14 0.462 390 844 0.462 1170 2532











































Mobile Huawei Mate 30 Pro 0.490 392 800 0.490 1176 2400











































Mobile Google Pixel 3 0.500 393 786 0.500 1080 2160











































Mobile Samsung S23 Ultra 0.500 393 786 0.466 1440 3088











































Mobile Google Pixel 3a 0.486 393 808 0.486 1080 2220











































Mobile Xiaomi Mi 6 0.482 393 816 0.481 1080 2244











































Mobile Xiaomi Mi 8 SE 0.482 393 816 0.481 1080 2244











































Mobile Xiaomi Mi 8, Mi 8 Pro 0.481 393 817 0.481 1080 2244











































Mobile Google Pixel 4 0.473 393 830 0.474 1080 2280











































Mobile Google Pixel 4a 0.462 393 851 0.462 1080 2340











































Mobile Google Pixel 5 0.462 393 851 0.462 1080 2340











































Mobile Xiaomi Mi 10 0.462 393 851 0.462 1080 2340











































Mobile Xiaomi Mi 10 Pro 0.462 393 851 0.462 1080 2340











































Mobile Xiaomi Mi 9 Lite 0.462 393 851 0.462 1080 2340











































Mobile Xiaomi Mi 9 SE 0.462 393 851 0.462 1080 2340











































Mobile Xiaomi Mi 9, Mi 9T 0.462 393 851 0.462 1080 2340











































Mobile Xiaomi Redmi Note 7 0.462 393 851 0.462 1080 2340











































Mobile Xiaomi Redmi Note 8 0.462 393 851 0.462 1080 2340











































Mobile Xiaomi Redmi Note 8 Pro 0.462 393 851 0.462 1080 2340











































Mobile Xiaomi Redmi Note 9 0.462 393 851 0.462 1080 2340











































Mobile Apple iPhone 14 Pro 0.461 393 852 0.461 1179 2556











































Mobile Apple iPhone 15 0.461 393 852 0.461 1179 2556











































Mobile Apple iPhone 15 Pro 0.461 393 852 0.461 1179 2556











































Mobile Xiaomi Mi 10T, Xiaomi Mi 10T Pro 0.450 393 873 0.450 1080 2400











































Mobile Xiaomi Redmi Note 9 Pro 0.450 393 873 0.450 1080 2400











































Mobile Huawei P40 Pro 0.455 400 880 0.455 1200 2640











































Mobile Motorola Nexus 6 0.562 411 731 0.563 1440 2560











































Mobile Motorola Nexus 6P 0.562 411 731 0.563 1440 2560











































Mobile Sony Xperia 1 0.428 411 960 0.428 1644 3840











































Mobile Google Pixel 0.563 412 732 0.563 1080 1920











































Mobile Google Pixel 2 0.563 412 732 0.563 1080 1920











































Mobile Google Pixel XL 0.563 412 732 0.563 1440 2560











































Mobile Samsung J7 Prime2 0.563 412 732 0.563 1080 1920











































Mobile Google Pixel 2 XL 0.501 412 823 0.500 1440 2880











































Mobile Google Pixel 3a XL 0.501 412 823 0.500 1080 2160











































Mobile Google Pixel 3 XL 0.487 412 846 0.486 1440 2960











































Mobile Google Pixel 4 XL 0.474 412 869 0.474 1440 3040











































Mobile OnePlus 6 0.474 412 869 0.474 1080 2280











































Mobile Samsung Note10 0.474 412 869 0.474 1080 2280











































Mobile Samsung Note10+ 0.474 412 869 0.474 1440 3040











































Mobile Samsung S10+ 0.474 412 869 0.474 1440 3040











































Mobile Samsung Note20 Ultra 0.467 412 883 0.466 1440 3088











































Mobile OnePlus 6T 0.462 412 892 0.462 1080 2340











































Mobile OnePlus 7 0.462 412 892 0.462 1080 2340











































Mobile OnePlus 7 Pro 0.462 412 892 0.462 1440 3120











































Mobile OnePlus 7T Pro 0.462 412 892 0.462 1440 3120











































Mobile Samsung A30 0.462 412 892 0.462 1080 2340











































Mobile Samsung A50 0.462 412 892 0.462 1080 2340











































Mobile Samsung A50s 0.462 412 892 0.462 1080 2340











































Mobile OnePlus 8 Pro 0.455 412 906 0.455 1440 3168











































Mobile OnePlus 7T 0.451 412 914 0.450 1080 2400











































Mobile OnePlus 8T 0.451 412 914 0.450 1080 2400











































Mobile Samsung A70s 0.451 412 914 0.450 1080 2400











































Mobile Samsung A71 0.451 412 914 0.450 1080 2400











































Mobile Samsung S10 Lite 0.451 412 914 0.450 1080 2400











































Mobile Samsung S20 FE 0.451 412 914 0.450 1080 2400











































Mobile OnePlus 8 0.450 412 915 0.450 1080 2400











































Mobile OnePlus 9 0.450 412 915 0.450 1080 2400











































Mobile OnePlus Nord 0.450 412 915 0.450 1080 2400











































Mobile Samsung A31 0.450 412 915 0.450 1080 2400











































Mobile Samsung A32/td> 0.450 412 915 0.450 1080 2400











































Mobile Samsung A51 0.450 412 915 0.450 1080 2400











































Mobile Samsung Note20 0.450 412 915 0.450 1080 2400











































Mobile Samsung S20 Ultra 0.450 412 915 0.450 1440 3200











































Mobile OnePlus 9 Pro 0.448 412 919 0.448 1440 3216











































Mobile Samsung Z Flip 0.410 412 1004 0.410 1080 2636











































Mobile Apple iPhone 11 0.462 414 896 0.462 828 1792











































Mobile Apple iPhone 6s Plus 0.563 414 736 0.563 1080 1920











































Mobile Apple iPhone 7 Plus 0.563 414 736 0.563 1080 1920











































Mobile Apple iPhone 8 Plus 0.563 414 736 0.563 1080 1920











































Mobile Apple iPhone 11 Pro Max 0.462 414 896 0.462 1242 2688











































Mobile Apple iPhone XR 0.462 414 896 0.462 828 1792











































Mobile Apple iPhone XS Max 0.462 414 896 0.462 1242 2688











































Mobile Apple iPhone 12 Pro Max 0.462 428 926 0.462 1284 2778











































Mobile Apple iPhone 13 Pro Max 0.462 428 926 0.462 1284 2778











































Mobile Apple iPhone 14 Plus 0.462 428 926 0.462 1284 2778











































Mobile Apple iPhone 14 Pro Max 0.461 430 932 0.461 1290 2796











































Mobile Apple iPhone 15 Plus 0.461 430 932 0.461 1290 2796











































Mobile Apple iPhone 15 Pro Max 0.461 430 932 0.461 1290 2796











































Mobile Sony Xperia C4 0.563 540 960 0.563 1080 1920











































Mobile Sony Xperia Z Ultra 0.563 540 960 0.563 1080 1920











































Tablet LG G Pad 5 10.1" 0.625 600 960 0.625 1200 1920











































Tablet Apple iPad Mini 0.750 768 1024 0.750 1536 2048











































Tablet Apple iPad 10.2" 0.750 810 1080 0.750 1620 2160











































Tablet Apple iPad Air (2020) 0.695 820 1180 0.695 1640 2360











































Tablet Apple iPad Air 0.750 834 1112 0.750 1668 2224











































Tablet Apple iPad Pro 11" 0.698 834 1194 0.698 1668 2388











































Tablet Apple iPad Pro 12.9" 0.750 1024 1366 0.750 2048 2732











































Laptop Microsoft Surface 2 1.778 1280 720 1.778 1920 1080











































Laptop Microsoft Surface 3 1.778 1280 720 1.778 1920 1080











































Laptop Microsoft Surface Pro 1.778 1280 720 1.778 1920 1080











































Laptop Microsoft Surface Pro 2 1.778 1280 720 1.778 1920 1080











































Tablet Huawei MatePad Pro 1.600 1280 800 1.600 2560 1600











































Laptop MacBook Air 13.3" 1.600 1280 800 1.600 2560 1600











































Laptop MacBook Pro 13.3" 1.600 1280 800 1.600 2560 1600











































Laptop Microsoft Surface 1.779 1366 768 1.779 1366 768











































Laptop Microsoft Surface Pro 4 1.500 1368 912 1.500 2736 1824











































Laptop Microsoft Surface Pro 5 1.500 1368 912 1.500 2736 1824











































Laptop Microsoft Surface Pro 6 1.500 1368 912 1.500 2736 1824











































Laptop Microsoft Surface Pro 7 1.500 1368 912 1.500 2736 1824











































Laptop MacBook Pro 1.600 1440 900 1.600 2880 1800











































Laptop Microsoft Surface Pro 3 1.500 1440 960 1.500 2160 1440











































Laptop Microsoft Surface Pro X 1.500 1440 960 1.500 2880 1920











































Laptop Microsoft Surface Book 1.500 1500 1000 1.500 3000 2000











































Laptop Microsoft Surface Book 3 (13.5") 1.500 1500 1000 1.500 3000 2000











































Laptop Microsoft Surface Laptop 1.500 1504 1003 1.500 2256 1504











































Laptop Microsoft Surface Laptop 3 (13.5") 1.500 1504 1003 1.500 2256 1504











































Laptop MacBook Pro 16" 1.600 1536 960 1.600 3072 1920











































Laptop Microsoft Surface Book 3 (15") 1.500 1620 1080 1.500 3240 2160











































Laptop Microsoft Surface Laptop 3 (15") 1.499 1664 1110 1.500 2496 1664












































Sheet 22: Sheet1


Firefox Chrome Safari Opera Android Ch Android FF iOS Chrome iOS Safari
Filezilla: change smaws directory names to lower case e.g. “censored”









Firefox
Chrome

50.1216216216
{status: 5, waitNow: false, value: 0, unit: 0, flip: 1} FALSE e: {status: 1, waitNow: false, value: 1000, unit: 1, flip: 0}
set location.url or DOMContentLoaded DOMContentLoaded








pauseIdler visChange
touch requires pauseIdler on clickIt(), not mouseIt()





16.67

16.66
10469.2999999523

e2: {value: 0, unit: 0, flip: 1} FALSE e2: {value: 1000, unit: 1, flip: 0}
set address bar url pageshow false navigate pageshow false navigate









mouseIt
test: linksMenu open, click songButt to open songMenu




0.00 21.53
0.00 16.64
10510.3999999761 41.1000000238
#autoTrip: false TRUE #autoTrip: false
F5 Refresh or pagehide







NO audio typist.line = typist line count error cueLogo()

pauseIt clickIt data-links attribute, mouseIt()




110.76 110.76
16.28 16.28
10562.1000000238 51.7000000477
#base: 0 TRUE #base: 0
location.reload() visibilityState: hidden







grainy animation not running in Chrome (pre-agree)


loadIt





116.58 5.82
32.94 16.67
10610.8999999761 48.7999999523
#count: undefined TRUE #count: undefined

DOMContentLoaded DOMContentLoaded






pulsing (blinking) YES> NO> on welcome “screen”









133.24 16.66
49.61 16.67
10660.6000000238 49.7000000477
#dist: 1000 TRUE #dist: 1000

pageshow false reload pageshow false reload






censored/uncensored:









149.90 16.66
66.23 16.61
10717.2999999523 56.6999999285
#e: Object TRUE #e: Object
leave page pagehide pagehide






wipe “arm” to “uck” in final <tspan> of logo









166.56 16.66
82.94 16.72
10763.7000000476 46.4000000953
#end: 1000 TRUE #end: 1000

visibilityState: hidden visibilityState: hidden






slight delay between typing and wipe? 500ms





300 493

183.24 16.68
99.54 16.60
10811.1000000238 47.3999999762
#firstLeg: Object TRUE #firstLeg: Object
back/fwd to page visibilityState: visible visibilityState: visible






RAF.js – what's the deal with _colors and FN.rgb?





320 2000

199.90 16.66
116.24 16.70
10872 60.8999999762
#inbound: undefined FALSE #inbound: true

pageshow true back_forward pageshow true navigate (!sometimes back_forward)






smooth out opening gpu test static animation, slower





0.0666666667 246.5

216.56 16.66
132.94 16.70
10910.7999999523 38.7999999523
#isInc: false TRUE #isInc: false
switch tabs | apps visibilitychange visibilitychange






Quick fade in wipe audio (neon?)





0.0666666667 246.5

233.24 16.68
149.61 16.67
10966.6000000238 55.8000000715
#lastLeg: Object TRUE #lastLeg: Object










uncensored checkbox check mark for checked visual






246.5

249.90 16.66
166.28 16.67
11012.7000000476 46.1000000238
#leg: Object TRUE #leg: Object






169


hide (fade out) static bg after hasAgreed

#cloth baseFrequency





266.56 16.66
182.94 16.66
11075.1000000238 62.3999999762
#legsWait: NaN TRUE #legsWait: NaN






169


A and AT variables should be named P and PR, property not attribute...

11.187 terrycloth

3.528 5 17.64
283.24 16.68
199.61 16.67
11111.5 36.3999999762
#loop: undefined TRUE #loop: undefined






375


documentation too...

10.067 post-animation





299.90 16.66
216.27 16.67
11168.8999999761 57.3999999761
#now: 0 TRUE #now: 0






37


links menu (aka share menu): github, linkedin, (uncensored: youtube),

1.120






316.56 16.66
232.94 16.67
11217.1000000238 48.2000000477
#onArrival: 0 TRUE #onArrival: 0
dist: 500
dist: 500






stackoverflow, bugzilla?, chrome bugs? The one with colors to settings was good, the others...




323 323


333.24 16.68
249.60 16.66
11260.2999999523 43.1999999285
#pause: 0 TRUE #pause: 0
down: false
down: false






or sidewayss youtube account and all censored, no Cracker-In-Chief




314 310 -4

349.90 16.66
266.22 16.61
11324.8999999761 64.6000000238
#pauseRT: 0 TRUE #pauseRT: 0
ease: ƒ #sineOut(v)








copyLink click displays alert “link copied to clipboard.” - transition & timer would be nice...









366.00 16.10
282.94 16.72
11371.5 46.6000000239
#peri: undefined TRUE #peri: undefined
end: 1000
end: 1000






- remove old share icon files from htdocs, facebook, twitter, mix, etc.

10.797 initial setting
-9 -13 -13




299.60 16.66
11417.3999999761 45.8999999761
#plays: 1 TRUE #plays: 1
io: 1
io: 1

4.519



Pause|Play idler button on homepage, bottom row of face

-0.390









316.27 16.67
11463 45.6000000239
#post: undefined TRUE #post: undefined
next: undefined
next: undefined

TRUE



revert to !hasAgreed button on face (can change uncensored checkbox)

0.730









332.93 16.66
11525.6000000238 62.6000000238
#pre: undefined TRUE #pre: undefined
part: 0.5
part: 0.5

b min max diff
censored toggle button on face? another thing to hide...












349.61 16.67
11573.2999999523 47.6999999285
#reversed: true TRUE #reversed: true
prev: {type: 1, io: 0, time: 1000, end: 500, start: 0, …}
prev: {type: 1, io: 0, time: 1000, end: 500, start: 0, …}

226 43 226 183
what to do with upcoming variable?

1.036 1119
14 3 422.25 205



366.00 16.39
11619.5 46.2000000477
#roundTrip: true TRUE #roundTrip: true
start: 500
start: 500

0.886 0.169 0.886 0.718

















11660.6000000238 41.1000000238
#run: ƒ #ease(now, leg, e) FALSE
time: 880
time: 750

l

sum
from /info, browser back button takes you to blank homepage, must F5

0.932 1007
14 3 422.15 205






11710.2999999523 49.6999999285
#start: 0 TRUE #start: 0
type: 1
type: 1

53

269
resizing window should always pause idler




14 3 421.74 205






11760.3999999761 50.1000000238
#targets: Set(2) TRUE #targets: Set(2)
unit: 1
unit: 1

b

1.055
song.inner and outer combined in one Elms instance




30 3 421.03 205






11823.2999999523 62.8999999762
#time: 2000 TRUE #time: 2000
wait: 120
wait: 130

11



xlink:href deprecated, and do I still need xlmns=xlink? Yes!

19.884
41 3 420.53 205






11860.8999999761 37.6000000238
#value: undefined TRUE #value: undefined










mouseTouch functions should take an array of elms or Elms as an option


48
55 3 419.92 205






11910.7000000476 49.8000000715
#wait: 0 TRUE #wait: 0
raf/test/color







slow down the song list open /close cues animation & audio


2.414
67 3 419.41 205






11961.7000000476 51
#ze FALSE #zero: 2000
frame object:







iAgree: audio duration matching lower fidelity gpu animation time?

19.8822509939086 distance 80 3 418.80 205






12030 68.2999999524



t: of course g.easies = new Easies(ezX);






stackoverflow: post question when to run array.some prior to .forEach?


1.4142135624











12060.6000000238 30.6000000238



x: same as both others updateEzXY()






transition animations:

14.0588745030457 x/y offset










12111 50.3999999762



args: oneD x 3, twoD x 3 x 2 newTargets()






static green vs b&w, always serial as overlap is messy


28.1177490061











12160.5 49.5



localStorage restore: updateTime()


x y/multi

slide in left to right/right to left with ease slow to fast, simultaneous or serial

48.0000000000001











12210.6000000238 50.1000000238



color-name button.symButt textContent newMulti()

first-time user scrape screen




48.0042224742266











12260.7999999523 50.1999999285



MEaser-: or elms.named.value


save named

sideways.js



94 3 418.19 205






12323.7999999523 63



Easy-:


returning user localStorage

ez.addXX() change addend: to start:

33.9411254969543
106 3 417.69 205












time: msecs = elms.time.value case 1: set zero w/performance.now() pre rAF()

open named

ez.addXX() change factor: to end: or distance:




120 3 417.08 205












roundTrip: button.symButt textContent slightly less late or maybe a tiny bit early






variable naming: Elm vs Element vs Object, sometimes identical properties across types





















start-color: <input type="text"> value







abbreviated names for _htmlR functions, maybe _html too





















end-color: ditto case 2: set zero inside first frame's callback






clickYesNo glob.svgW factor:2, clarify by testing factor:0, addend:0




131 3 416.57 205












start-space: <select> value audio up to a frame late






loadIt() expired variable – kill it but pick the right speed.





















end-space: ditto unless you use frame rounding to split that






welcome animation typist.chars[3] = typist.up[0], review that





















collapse: button.symButt textContent







raf.js




143 3 416.07 205












fullBody button.symButt textContent







plays > 1 && roundTrip forces autoTrip = true


100
157 3 415.46 205












linkSpaces: button.symButt textContent 0.000 3





MEBase.autoTrip effectively toggles roundTrip, but ez.rT must be ON























__0.0 1





test pause/resume with turns, especially return trip





















0 1 __0.0






maybe Ez.zinit() should be run by user...





















0 100 __0.0






ASyncCues w/setTimeout() is possibly a better implementation





















0 105 __0.0






roundTrip option: flipTrip to flip io by leg or not (currently always on)


255
168 3 414.95 205












0 145 __0.0






bezier does not flipTrip now - how to flip bezier?


0.3921568627
182 3 414.34 205












0 150 __0.0 0





easy.addXX(): mask arg should be before func arg, zero is a mask...




196 3 413.73 205












0 220 ____0






.basic=true w/func, mask and units (especially mask)




208 3 413.23 205












0 360 ____0






what was the deal with the “combo” variable in ease() and easeMe()?




221 3 412.62 205












0 9504.7 ____0

829.8



was I trying to collect unique values (a Set) from teaser?





















0 10000 ____0

812.362



Prop.get() do I need a way to force get empty string, not computed value?





















0 10888.3 -0.00 2
17.438



similar to #izSVG returning false to force getting style value (or vice-versa)

4


















0 65504 -.000 3x





Prop.svg to avoid adding units for skewX/Y, translate, what else?

10


















-0.36 1.47 -.000






if 2D arrays are byArgByElm you must set .bAbE or .byArgByElm!

0.4


















-0.4 0.4 -000 0





new Func, maybe add arg for separator now that funcs all categorized





















-0.5 0.5 -000






do I need code to return numbers from #funcN functions? Transforms?





















-125 125







should I expose filter funcs like transform funcs in Elm?




238 3 411.91 205












-215 215







future option to roundtrip w/o swapping inOut




249 3 411.40 205






















I am now including leg.wait in this.#time, side-effects???




263 3 410.79 205






















Should all of cfg.param be validated as/converted to numbers?




277 3 410.18 205






















Does it take a long time? It's not much code…




289 3 409.68 205














now 1000 play




Class Elm and CSSStyleDeclaration!!!!!




305 3 408.97 205














#zero 1000





multiFunc: preserving current value func order is impossible




319 3 408.36 205














#now 0





because args must be in fixed order at top level




330 3 407.85 205














now 3250 pause




if elm has alt func order it must be in separate easer




344 3 407.24 205












currTime: 0.000 #now 2250





docs: CSS – use rotateZ() instead of rotate(), so latter can be svg-only




356 3 406.74 205












perfNow: 28545.400 cue[#i].wait 2500





PR.r3 and PR.hsl.units




374 3 405.93 205












sleeping...
remainder 250





CSS path() function: fill-rule arg not supported, set it as a CSS property instead




388 3 405.32 205












currTime: 1.011 now 5000 resume




loop and roundtrip never touch start/end unless you set pause(RT)




406 3 404.51 205












perfNow: 29557.900 #zero 2750





{pause:1} it will land but jump in next frame, best to set = ~16 (1 frame @60hz)




418 3 404.00 205












timeStamp: 29546.145 #now 2250 no-change




can't up-dimension from 1D byElm





















currTime: 1.011 time spent pausing 2750





so can't have a 1D byElm famm and a 2D famm in same Easer




404 0 -18.25 0












perfNow: 29558.400







Easy.#unit and #end: having both makes it easier for >1 targets


























60



If it's a performance drag to computing both, remove #end and


























16.6666666667



force factors/addends on all targets.































margin and padding 1-4 args: let() only handle 1 and 4, not 2 args































easy.pre runs at time=zero, regardless of wait value, enhancement…


























999



problem is knowing when it's this.#wait that has expired


























16.67



if (!Is.def(o.mask) && f/a == number) no mask, spread f/a


























16653.33



if you want the f/a number to act as mask of zero, use [N]


























1028



let(): funcs with argN list or flex args, plugging only happens if user


























24



Value is full-length array with undefined elements for where to plug


























0.0233463035



You could create a custom bitmask if you really want to































current value is considered complete, the full set of args


























-15



animation handles CSS gradients with Geaser. calc, linear, steps


























1030



are unlikely to be animated.


























-1.456%



though maybe this should be done via vet() or net(), not let()...


























-0.495%



for Geaser: dx, dy, x, y, rotate are optionally unstructured w/<text>,<tspan>


























99.505%



you must set the .set property in the obj arg to E.net to Geaser them


























98.544%



if no mask:































if 2D array, 1st elm's array used as mask































if both factor & addend are arrays, longest or factor = mask































basically: in these cases I recommend using a mask































if no factor or addend but spread ease value, mask required































max and min arrays are never used as as the mask































If config.dmax == 2, all 1D arrays are by arg, not by elm































I can't imagine a case where you would need 1D by elm































easy.addXX(): factor, addend, plug arrays, must be same size






















Sheet 23: Sheet1 (2)

const easy = new Easy({time:2000, start:0, end:1000});












time (ms) value0 unit0 comp0 value1 unit1 comp1 value2 unit2 comp2
2 colors side-by-side



color fill stroke accent bgColor border-alpha value #controls 1
const easy2 = new Easy({time:2000, start:0, end:1000});












0 18 0 1 18 0 1 18 0 1 toggle E & M> Easing or Multi duration
borders select, input border-gray button, … state state x controls controls x span 20
const easy3 = new Easy({time:2000, start:0, end:1000});












17 21 0.008 0.992 21 0.008 0.992 21 0.008 0.992
start color start canvas

controls, s/e canvas black .black, … state:disabled state:disabled time endCanvas startCanvas time select 4
const easies = new Easies([easy,easy2,easy3]);












33 23 0.017 0.983 23 0.017 0.983 23 0.017 0.983
end color end canvas
color select, input pitch .symSpan, …



endCanvas
text 2
const measer = easies.newTarget({elm:myElm, prop:Prop.clipPath, mask:[6, 8, 14, 16, 22, 24], start:18, end:346, easies:[easy, easy, easy2, easy2, easy3, easy3]});












50 26 0.025 0.975 26 0.025 0.975 26 0.025 0.975
left space right space

span





input texts
range 2
const raf = new AFrame(easies);












67 29 0.033 0.967 29 0.033 0.967 29 0.033 0.967
left start right start

button, state stop: disabled gray




selects
label 3














83 32 0.042 0.958 32 0.042 0.958 32 0.042 0.958
left end right end
bg-color controls





rightStart
button 4














100 34 0.050 0.950 34 0.050 0.950 34 0.050 0.950
left value right value








rightValue
state 2














117 37 0.058 0.942 37 0.058 0.942 37 0.058 0.942
left display value right display value








rightEnd
div 2














133 40 0.067 0.933 40 0.067 0.933 40 0.067 0.933
left canvas right canvas











40














150 43 0.075 0.925 43 0.075 0.925 43 0.075 0.925
input#x <"fullscreen" button

















common
easings.html controls




167 45 0.083 0.917 45 0.083 0.917 45 0.083 0.917
playback












1030




# easy time both



183 48 0.092 0.908 48 0.092 0.908 48 0.092 0.908















635 635

common.js
# easy plays both



200 51 0.100 0.900 51 0.100 0.900 51 0.100 0.900















0.6165048544 0.6165048544 8.0145631068 * easteps.js
# easy loopWait both



217 54 0.108 0.892 54 0.108 0.892 54 0.108 0.892

















2.4660194175
draw.js
# easy roundTrip both



233 56 0.117 0.883 56 0.117 0.883 56 0.117 0.883















15


play.js
# easy autoTrip both



250 59 0.125 0.875 59 0.125 0.875 59 0.125 0.875















9.2475728155


update.js
# easy flipTrip y x = linear = noop


267 62 0.133 0.867 62 0.133 0.867 62 0.133 0.867















4


named.js
# easy tripWait both



283 64 0.142 0.858 64 0.142 0.858 64 0.142 0.858















5.2475728155


copy.js
# easy start y x fixed at 0


300 67 0.150 0.850 67 0.150 0.850 67 0.150 0.850



















easings.js
# easy end y x fixed at MILLI


317 70 0.158 0.842 70 0.158 0.842 70 0.158 0.842



















steps.js
#* easy… direction y



333 73 0.167 0.833 73 0.167 0.833 73 0.167 0.833



















multi.js

easy type y



350 75 0.175 0.825 75 0.175 0.825 75 0.175 0.825






















easy.leg type2 y



367 78 0.183 0.817 78 0.183 0.817 78 0.183 0.817















<check-tri> previous value


easy io y



383 81 0.192 0.808 81 0.192 0.808 81 0.192 0.808















FALSE TRUE FALSE TRUE default value

easy pow y



400 84 0.200 0.800 84 0.200 0.800 84 0.200 0.800















null null FALSE TRUE 3-way rotation order

easy.leg pow2 y



417 86 0.208 0.792 86 0.208 0.792 86 0.208 0.792















TRUE FALSE null null


easy bezier0 y



433 89 0.217 0.783 89 0.217 0.783 89 0.217 0.783















FALSE TRUE TRUE FALSE


easy bezier1 y



450 92 0.225 0.775 92 0.225 0.775 92 0.225 0.775






















easy bezier2 y



467 95 0.233 0.767 95 0.233 0.767 95 0.233 0.767






















easy bezier3 y



483 97 0.242 0.758 97 0.242 0.758 97 0.242 0.758





















* easer {loopByElm} y



500 100 0.250 0.750 100 0.250 0.750 100 0.250 0.750






















local (linkType) y



517 103 0.258 0.742 103 0.258 0.742 103 0.258 0.742






















local (linkPow) y



533 105 0.267 0.733 105 0.267 0.733 105 0.267 0.733






















local (drawSteps) y



550 108 0.275 0.725 108 0.275 0.725 108 0.275 0.725






















raf [reset] y



567 111 0.283 0.717 111 0.283 0.717 111 0.283 0.717





























583 114 0.292 0.708 114 0.292 0.708 114 0.292 0.708
















<input type="number"/> input event change event


2 3 3 4
600 116 0.300 0.700 116 0.300 0.700 116 0.300 0.700
















userValues
3
changeSteps()


E.none E.start E.end E.both
617 119 0.308 0.692 119 0.308 0.692 119 0.308 0.692
















userTiming
3
ditto

3
0ms
0ms
633 122 0.317 0.683 122 0.317 0.683 122 0.317 0.683
















bezier
4 input.bezier()

0.3335 2000 667ms 667ms 667ms 667ms
650 125 0.325 0.675 125 0.325 0.675 125 0.325 0.675
















pow
2 inputTypeIO()


2000 1333ms 1333ms 1333ms 1333ms
667 127 0.333 0.667 127 0.333 0.667 127 0.333 0.667
















mid
1 input.mid() changeMSG()




2000ms 2000ms
683 130 0.342 0.658 130 0.342 0.658 130 0.342 0.658
















split
1 input.split() ditto

0
333
250
700 133 0.350 0.650 133 0.350 0.650 133 0.350 0.650
















gap
1
ditto

1000 500 667 333 500
717 136 0.358 0.642 136 0.358 0.642 136 0.358 0.642


















15




1000 1000 667 750
733 138 0.367 0.633 138 0.367 0.633 138 0.367 0.633


























1000 1000
750 141 0.375 0.625 141 0.375 0.625 141 0.375 0.625





























767 144 0.383 0.617 144 0.383 0.617 144 0.383 0.617





























783 146 0.392 0.608 146 0.392 0.608 146 0.392 0.608





























800 149 0.400 0.600 149 0.400 0.600 149 0.400 0.600





























817 152 0.408 0.592 152 0.408 0.592 152 0.408 0.592





























833 155 0.417 0.583 155 0.417 0.583 155 0.417 0.583





























850 157 0.425 0.575 157 0.425 0.575 157 0.425 0.575





























867 160 0.433 0.567 160 0.433 0.567 160 0.433 0.567





























883 163 0.442 0.558 163 0.442 0.558 163 0.442 0.558





























900 166 0.450 0.550 166 0.450 0.550 166 0.450 0.550





























917 168 0.458 0.542 168 0.458 0.542 168 0.458 0.542





























933 171 0.467 0.533 171 0.467 0.533 171 0.467 0.533





























950 174 0.475 0.525 174 0.475 0.525 174 0.475 0.525





























967 177 0.483 0.517 177 0.483 0.517 177 0.483 0.517





























983 179 0.492 0.508 179 0.492 0.508 179 0.492 0.508





























1000 182 0.500 0.500 182 0.500 0.500 182 0.500 0.500





























1017 185 0.508 0.492 185 0.508 0.492 185 0.508 0.492





























1033 187 0.517 0.483 187 0.517 0.483 187 0.517 0.483





























1050 190 0.525 0.475 190 0.525 0.475 190 0.525 0.475





























1067 193 0.533 0.467 193 0.533 0.467 193 0.533 0.467





























1083 196 0.542 0.458 196 0.542 0.458 196 0.542 0.458





























1100 198 0.550 0.450 198 0.550 0.450 198 0.550 0.450





























1117 201 0.558 0.442 201 0.558 0.442 201 0.558 0.442





























1133 204 0.567 0.433 204 0.567 0.433 204 0.567 0.433





























1150 207 0.575 0.425 207 0.575 0.425 207 0.575 0.425





























1167 209 0.583 0.417 209 0.583 0.417 209 0.583 0.417





























1183 212 0.592 0.408 212 0.592 0.408 212 0.592 0.408





























1200 215 0.600 0.400 215 0.600 0.400 215 0.600 0.400





























1217 218 0.608 0.392 218 0.608 0.392 218 0.608 0.392





























1233 220 0.617 0.383 220 0.617 0.383 220 0.617 0.383





























1250 223 0.625 0.375 223 0.625 0.375 223 0.625 0.375





























1267 226 0.633 0.367 226 0.633 0.367 226 0.633 0.367





























1283 228 0.642 0.358 228 0.642 0.358 228 0.642 0.358





























1300 231 0.650 0.350 231 0.650 0.350 231 0.650 0.350





























1317 234 0.658 0.342 234 0.658 0.342 234 0.658 0.342





























1333 237 0.667 0.333 237 0.667 0.333 237 0.667 0.333





























1350 239 0.675 0.325 239 0.675 0.325 239 0.675 0.325





























1367 242 0.683 0.317 242 0.683 0.317 242 0.683 0.317





























1383 245 0.692 0.308 245 0.692 0.308 245 0.692 0.308





























1400 248 0.700 0.300 248 0.700 0.300 248 0.700 0.300





























1417 250 0.708 0.292 250 0.708 0.292 250 0.708 0.292





























1433 253 0.717 0.283 253 0.717 0.283 253 0.717 0.283





























1450 256 0.725 0.275 256 0.725 0.275 256 0.725 0.275





























1467 259 0.733 0.267 259 0.733 0.267 259 0.733 0.267





























1483 261 0.742 0.258 261 0.742 0.258 261 0.742 0.258





























1500 264 0.750 0.250 264 0.750 0.250 264 0.750 0.250





























1517 267 0.758 0.242 267 0.758 0.242 267 0.758 0.242





























1533 269 0.767 0.233 269 0.767 0.233 269 0.767 0.233





























1550 272 0.775 0.225 272 0.775 0.225 272 0.775 0.225





























1567 275 0.783 0.217 275 0.783 0.217 275 0.783 0.217





























1583 278 0.792 0.208 278 0.792 0.208 278 0.792 0.208





























1600 280 0.800 0.200 280 0.800 0.200 280 0.800 0.200





























1617 283 0.808 0.192 283 0.808 0.192 283 0.808 0.192





























1633 286 0.817 0.183 286 0.817 0.183 286 0.817 0.183





























1650 289 0.825 0.175 289 0.825 0.175 289 0.825 0.175





























1667 291 0.833 0.167 291 0.833 0.167 291 0.833 0.167





























1683 294 0.842 0.158 294 0.842 0.158 294 0.842 0.158





























1700 297 0.850 0.150 297 0.850 0.150 297 0.850 0.150





























1717 300 0.858 0.142 300 0.858 0.142 300 0.858 0.142
end 1000 end 1000
























1733 302 0.867 0.133 302 0.867 0.133 302 0.867 0.133
legs [ legs [
























1750 305 0.875 0.125 305 0.875 0.125 305 0.875 0.125
{
{

























1767 308 0.883 0.117 308 0.883 0.117 308 0.883 0.117
time 1500 time 1500
























1783 310 0.892 0.108 310 0.892 0.108 310 0.892 0.108
type 7 end 585
























1800 313 0.900 0.100 313 0.900 0.100 313 0.900 0.100
io 1 type 7
























1817 316 0.908 0.092 316 0.908 0.092 316 0.908 0.092
pow 2.5 io 1
























1833 319 0.917 0.083 319 0.917 0.083 319 0.917 0.083
end 585 pow 2.5
























1850 321 0.925 0.075 321 0.925 0.075 321 0.925 0.075
},
}

























1867 324 0.933 0.067 324 0.933 0.067 324 0.933 0.067
{
{

























1883 327 0.942 0.058 327 0.942 0.058 327 0.942 0.058
time 500 time 500
























1900 330 0.950 0.050 330 0.950 0.050 330 0.950 0.050
type 7 type 7
























1917 332 0.958 0.042 332 0.958 0.042 332 0.958 0.042
pow 5 pow 5
























1933 335 0.967 0.033 335 0.967 0.033 335 0.967 0.033
}
}

























1950 338 0.975 0.025 338 0.975 0.025 338 0.975 0.025
]
]

























1967 341 0.983 0.017 341 0.983 0.017 341 0.983 0.017





























1983 343 0.992 0.008 343 0.992 0.008 343 0.992 0.008





























2000 346 1 0 346 1 0 346 1 0










































































start end eKey



































r: 0 1 unit



































g: 0 1 unit




1000,"steps" 30,"timing"




























b: 0 1 unit

{"time" 3125,"type" 9,"end"

pow_2.5o/5i,"jump" 3}


























a: 1 0 comp




1000,\"steps\" 30,\"jump\"


































{\time\" 3125,\"type\" 9,\"end\"

3,\"timing\" \"pow_2.5o/5i\"}"
























57.609 55.008 117.609




































48.016 45.406 108.016 9px 8ch


































9.593 9.602 9.593 6px 6ch -2ch




































3px
6ch


































64






































54.406

left



































9.594

639.765625 autoTrip





































679.453125 loopByElm





































39.6875 diff